empty是什么意思(css中:empty指的是什么)

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

　　如果元素沒有任何子元素(節點)或文本內容,則該元素計為空。注釋和處理指令不會影響元素是否為空。如:

　　<p><!-在這里評論-></p>

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

　　<p>

　　文本和子節點。

　　<p>這里有一些內容。</p></p><p>

　　在這打字。

　　</p>

　　則不會被認為是空,因此與選擇器不匹配。

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

　　/*選擇并隱藏頁面上的所有元素*/

　　*:empty{

　　display:none;

　　}

　　/*選擇并隱藏所有空段落*/

　　p:empty{

　　display:none;

　　}

　　/*選擇并隱藏所有空的菜單項*/

　　nava:empty{

　　display:none;

　　}

　　/*選擇表中的空表格單元格并對其應用背景顏色*/

　　td:empty{

　　background-color:#eee;

　　}

　　說明:

　　1、由偽元素::before,::after生成的內容并不算作“真實”內容,即使它們存在于元素內部,也不會影響元素之間的空白。

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

　　<p></p><!-包含一個空格->

　　<p><span></span></p><!-包含一個空元素->

　　3、由于空格被視為內容,因此打開但未關閉的元素標記也不會為空。例如:

　　<p>

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

　　<p><p>內容......</p>

　　5、如果一個開放標記后跟另一個未直接跟隨另一個標記的開放標記,則第一個標記被認為是空的,而第二個標記則不是(因為空白)。例如:

　　<p><p>

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

　　下面我們通過簡單的示例來看看:empty的使用:

　　示例演示:把亞麻色背景應用于空段落

　　html代碼:

　　<pclass="container">

　　<p>

　　測試,測試,測試,測試,測試,測試,測試,測試,測試。

　　</p>

　　<p></p>

　　<p>

　　測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試,測試!

　　</p>

　　<pclass="pseudo"></p>

　　<p><!--這里評論--></p>

　　<p><p></p>

　　</p>

　　css代碼:

　　.container{

　　margin:40pxauto;

　　max-width:700px;

　　}

　　p:empty{

　　background-color:linen;

　　padding:15px;

　　}

　　.pseudo::before{

　　content:"::before添加內容";

　　}

感謝各位的閱讀!關于“css中:empty指的是什么”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!