為什麼 :not(:empty) 不適用於輸入欄位？

理解:not(:empty) CSS 選擇器

:not(:empty) 偽類表示沒有任何內容的HTML 元素孩子們。但是，對於像 這樣的 void 元素，此條件始終為 true，無論該元素是否具有歸屬於它的值。

為什麼 :not(:empty) 不適用於輸入欄位

空元素，例如，沒有任何子節點。因此，根據 HTML 定義，它們始終被視為空，並且始終與 :empty 偽類別相符。

此外，選擇器規範將 :empty 定義為沒有任何子元素的元素，包括文字或非零長度的 CDATA 等子節點。

CSS 樣式的後果

因此， input:not(:empty) 永遠不會匹配任何 。有效 HTML 文件中的欄位。因此，您無法動態設定空 的樣式。欄位僅基於 CSS 規則，因為一旦輸入文本，該元素就不再被視為空。

替代方法

選擇空的唯一方法 ;使用CSS 的欄位是基於空值屬性(input[value=""]) 或完全缺少值屬性(input:not([value])) 來定位它們。但是，這是一種靜態方法，在填充輸入欄位值後不會捕獲其值的變化。

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