首頁 > web前端 > css教學 > 主體

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

Susan Sarandon
發布: 2024-11-05 18:01:02
原創
537 人瀏覽過

Why Doesn't :not(:empty) Work for Input Fields?

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

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