:empty是什麼？怎麼使用？

:empty是什麼？這篇文章就跟大家介紹:empty的相關知識，讓大家對:empty有一定的了解。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

首先我們來了解一下:empty是什麼？有什麼作用？

:empty是一個css的偽類別選擇器，用來選擇頁面中為空的元素。

如果元素沒有任何子元素（節點）或文字內容，則該元素計為空。註解和處理指令不會影響元素是否為空。如：

< div > <！ - 在这里评论 - > </ div >

會被認為是空的，進而被:empty選中，而：

< div >
    文本和子节点。
    < p >这里有一些内容。</ p > </ div > < div >
    在这打字。
</ div >

則不會被認為是空，因此與選擇器不符。

選擇空元素對於隱藏這些元素很有用，因為如果它們有填充，它們可能是奇怪的垂直和/或水平空白區域的原因。它對於在不再需要或有用空元素的動態環境中刪除空元素也很有用。例：

/ *选择并隐藏页面上的所有元素* / 
* ：empty {
     display：none;
}

/ *选择并隐藏所有空段落* / 
p ：empty {
     display：none;
}

/ *选择并隐藏所有空的菜单项* / 
nav  a ：empty {
     display：none;
}

/ *选择表中的空表格单元格并对其应用背景颜色* / 
td ：empty {
     background-color：#eee ;
}

說明：

1、由偽元素::before，::after產生的內容不算作「真實」內容，即使它們存在於元素內部，也不會影響元素之間的空白。

2、元素內的空格和空子元素計為該元素內的字元訊息，因此如果元素包含兩個元素中的一個，則該元素不再被視為空。例如，以下兩個元素不被視為空：

< p >  </ p >  <！ - 包含一个空格 - > 
< p > < span > </ span > </ p >  <！ - 包含一个空元素 - >

3、由於空格被視為內容，因此開啟但未關閉的元素標記也不會為空。例如：

< p >

4、如果開始標記後面緊跟著另一個標記，則它再次被視為空。

< p > < p >内容...... 

5、如果一個開放標記後面跟著另一個未直接跟隨另一個標記的開放標記，則第一個標記被認為是空的，而第二個標記則不是（因為空白）。例如：

< p > < p >

6、自閉合元件，例如

---

，
，和等都會被認為是空的，並且將和:empty選擇器匹配。

下面我們透過簡單的範例來看看:empty的使用：

#範例示範：把亞麻色背景套用到空白段落

html程式碼：

<div class="container">
  <p>
    测试，测试，测试，测试，测试，测试，测试，测试，测试。
  </p>
  <p></p>
  <p>
    测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试！
  </p>
  <p class="pseudo"></p>
  <p><!-- 这里评论 --></p>
  <p><p></p>
</div>

css程式碼：

.container {
  margin: 40px auto;
  max-width: 700px;
}

p:empty {
  background-color: linen;
  padding: 15px;
}

.pseudo::before {
  content: "::before添加内容";
}

效果圖：

總結：以上就是本篇的全部內容，希望對大家的學習有所幫助。

以上是:empty是什麼？怎麼使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！