揭開: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中文網其他相關文章!