這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹:empt和含義及作用是什么，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

:empty是什么？本篇文章就給大家介紹:empty的相關(guān)知識(shí)，讓大家對(duì):empty有一定的了解。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。

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

:empty是一個(gè)css的偽類選擇器，用于選擇頁面中為空的元素。

如果元素沒有任何子元素（節(jié)點(diǎn)）或文本內(nèi)容，則該元素計(jì)為空。注釋和處理指令不會(huì)影響元素是否為空。如：

< div > <！ - 在這里評(píng)論 - > </ div >

會(huì)被認(rèn)為是空的，進(jìn)而被:empty選中，而：

< div >
    文本和子節(jié)點(diǎn)。
    < p >這里有一些內(nèi)容。</ p > </ div > < div >
    在這打字。
</ div >

則不會(huì)被認(rèn)為是空，因此與選擇器不匹配。

選擇空元素對(duì)于隱藏這些元素很有用，因?yàn)槿绻鼈冇刑畛洌鼈兛赡苁瞧婀值拇怪焙?或水平空白區(qū)域的原因。它對(duì)于在不再需要或有用空元素的動(dòng)態(tài)環(huán)境中刪除空元素也很有用。例：

/ *選擇并隱藏頁面上的所有元素* / 
* ：empty {
     display：none;
}

/ *選擇并隱藏所有空段落* / 
p ：empty {
     display：none;
}

/ *選擇并隱藏所有空的菜單項(xiàng)* / 
nav  a ：empty {
     display：none;
}

/ *選擇表中的空表格單元格并對(duì)其應(yīng)用背景顏色* / 
td ：empty {
     background-color：#eee ;
}

說明：

1、由偽元素::before，::after生成的內(nèi)容并不算作“真實(shí)”內(nèi)容，即使它們存在于元素內(nèi)部，也不會(huì)影響元素之間的空白。

2、元素內(nèi)的空格和空子元素計(jì)為該元素內(nèi)的字符信息，因此如果元素包含兩個(gè)元素中的一個(gè)，則該元素不再被視為空。例如，以下兩個(gè)元素不被視為空：

< p >  </ p >  <！ - 包含一個(gè)空格 - > 
< p > < span > </ span > </ p >  <！ - 包含一個(gè)空元素 - >

3、由于空格被視為內(nèi)容，因此打開但未關(guān)閉的元素標(biāo)記也不會(huì)為空。例如：

< p >

4、如果開始標(biāo)記后面緊跟另一個(gè)標(biāo)記，則它再次被視為空。

< p > < p >內(nèi)容...... </ p >

5、如果一個(gè)開放標(biāo)記后跟另一個(gè)未直接跟隨另一個(gè)標(biāo)記的開放標(biāo)記，則第一個(gè)標(biāo)記被認(rèn)為是空的，而第二個(gè)標(biāo)記則不是（因?yàn)榭瞻祝＠纾?/p>

< p > < p >

6、自閉合元件，例如<hr />，<br />，和<img />等都會(huì)被認(rèn)為是空的，并且將和:empty選擇器匹配。

下面我們通過簡(jiǎn)單的示例來看看:empty的使用：

示例演示：把亞麻色背景應(yīng)用于空段落

html代碼：

<div class="container">
  <p>
    測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試。
  </p>
  <p></p>
  <p>
    測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試，測(cè)試！
  </p>
  <p class="pseudo"></p>
  <p><!-- 這里評(píng)論 --></p>
  <p><p></p>
</div>

css代碼：

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

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

.pseudo::before {
  content: "::before添加內(nèi)容";
}

效果圖：

總結(jié)

以上是生活随笔為你收集整理的:empt和含义及作用是什么的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。