首頁 > web前端 > css教學 > 為什麼 `input:not(:empty)` 沒有如預期般運作?

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

DDD
發布: 2024-11-05 11:02:02
原創
586 人瀏覽過

Why Does `input:not(:empty)` Not Work as Expected?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板