只有當窗體有錯誤時，我才能顯示錯誤div嗎？我知道如何用javascript實現，但是，如果可能的話，我想只用css來實現。

我試著像下面這樣寫css，但是它不起作用。 在html的任何地方輸入標簽。不僅僅是錯誤div的下一個兄弟。

錯誤div僅顯示表單有:html中的無效some where。

<div id="message">
  error.
</div>

<input class="required" required>

<table>
  <tr>
    <td>
      <input class="required" required>
    </td>
  </tr>
</table>

#message {
  display: none;
}

#message:has(:root .required:invalid) {
  display: block;
}

.required:invalid {
  background: red;
}

你可以用codepen試試這個樣本。 https://codepen.io/sforest1975/pen/poxMbYJ

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

這個偽類提供了一種方法，通過將相對選擇器列表作為參數來選擇相對于引用元素的父元素或前一個兄弟元素。

您的#message不是此處可能無效的任何內容的父項。為了基于任何后續兄弟選擇它，您需要首先在您的相對選擇器中使用一個組合子。

#消息:有(~。required:invalid)將基于以下任何無效輸入同級來選擇它。

并且要基于嵌套在后續兄弟元素中的任何輸入來定位它，您需要允許(至少)一個元素& quot介于& quot這兩個，所以#message:有(~ *。必填:無效)

因此，為了讓它在這兩種情況下都能工作，您需要

#message:has(~ .required:invalid),
#message:has(~ * .required:invalid) {
  display: block;
}

另一種可能性:

:root:has(.required:invalid) #message{
  display: block;
}