一、empty 偽類是什麼
Empty 偽類選擇器可以用來選擇沒有任何子元素的元素。當元素中沒有子元素或者只有空白文本時，該元素將會被選擇。
二、empty 偽類的使用場景
Empty 偽類的使用場景非常廣泛，下面列出了一些常見的應用場景。
1. 給沒有內容的元素添加樣式
p:empty {
background-color: #eee;
}
上面的代碼將會給所有沒有內容的段落添加灰色背景色。
2. 隱藏沒有內容的元素
p:empty {
display: none;
}
上面的代碼將會隱藏所有沒有內容的段落。
3. 給含有一個或多個子元素的元素去除部分樣式
p:not(:empty) {
font-size: 16px;
}
上面的代碼將會給所有含有一個或多個子元素的段落添加 16px 的字體大小。
4. 判斷選擇器的父級元素是否為空元素
p:not(:empty):before {
content: "I am not empty!"
}
上面的代碼將會給所有不為空的段落添加 “I am not empty!” 的文本。
三、empty 偽類的注意事項
Empty 偽類雖然使用很方便，但是在某些情況下需要注意以下幾點。
1. 空白符被視為內容
Empty 偽類中的「空內容」是指沒有任何子元素，但是它們可能由一個或多個空白符組成，例如空格、回車符、製表符等。
上面是三個空內容的示例，它們都會被 empty 偽類選擇。
2. 只能應用於元素選擇器
Empty 偽類只能應用於元素選擇器，不能用於類、ID 或其他屬性選擇器。
3. 不能匹配空文本節點
Empty 偽類無法匹配沒有內容的文本節點。例如，當一個段落只包含空文本節點時，Empty 偽類就無法匹配這個段落。
四、總結
Empty 偽類可以幫助我們輕鬆地選擇沒有任何子元素的元素。我們可以利用 empty 干很多事情，例如為沒有內容的元素添加樣式、隱藏沒有內容的元素、去除含有子元素的元素部分樣式、判斷選擇器的父級元素是否為空元素等。但還是需要注意 empty 偽類的一些注意事項。
原創文章，作者：VDPS，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/133960.html
微信掃一掃 
支付寶掃一掃 