為什麼 `input:not(:empty)` 沒有如預期般運作？

揭開:not(:empty) CSS 選擇器的神秘面紗

當嘗試控制空或非空輸入的外觀時使用:not(:empty) CSS 選擇器的字段，許多開發人員會遇到意外的行為。這個選擇器似乎與其他組合完美地配合使用，但是一旦將 :not(:empty) 添加到組合中就會引入異常。

混亂源自於輸入元素的獨特性質。 HTML 將 void 元素定義為「本質上是空的」元素，包括 元素。標籤。因此，所有 void 元素，無論其 value 屬性為何，都會被 :empty 偽類視為空。

此外，選擇器規格明確指出 :empty 目標元素沒有子節點，包括文字內容。因此，輸入欄位儘管有值，但始終缺少子節點，因此會符合 :not(:empty) 選擇器。

總之，在正確的 HTML 中使用 input:not(:empty)文件總是無法匹配任何內容。這種限制是由於 HTML 中 void 元素的固有性質以及 CSS 選擇器中 :empty 偽類的定義而產生的。

以上是為什麼 `input:not(:empty)` 沒有如預期般運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！