為什麼 :not(:empty) 不適用於帶有文字的輸入欄位？

:not(:empty) CSS 選擇器不起作用

:not(:empty) 選擇器無法定位包含文字內容的輸入欄位。組合多個選擇器時會出現此問題，特別是 :not(:empty):not(:focus):invalid。刪除 :not(:empty) 可以解決問題，但在 :not() 中使用它似乎不一致。

澄清一下，:empty 選擇器指示沒有子節點的元素。在輸入元素的上下文中，這包括那些沒有文字內容的元素。然而，HTML 定義將輸入元素分類為 void，這意味著它們本質上是空的。

如選擇器規格所述，「:empty 偽類表示根本沒有子元素的元素」。這包括輸入元素，無論其值如何，因此 input:not(:empty) 實際上永遠不會選擇有效 HTML 中的任何內容。

雖然 CSS 本身無法動態設定空輸入欄位的樣式，但您可以使用 [value 來定位原本為空的欄位=""] 或 :not([value]) 來設計適當的初始狀態。

以上是為什麼 :not(:empty) 不適用於帶有文字的輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！