css中的:empty是什么

这篇文章将为大家详细讲解有关css中的:empty是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

　　:empty是一个css的伪类选择器，用于选择页面中为空的元素。

　　如果元素没有任何子元素（节点）或文本内容，则该元素计为空。注释和处理指令不会影响元素是否为空。如：

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

　　会被认为是空的，进而被:empty选中，而：

　　<div>

　　文本和子节点。

　　<p>这里有一些内容。</p></div><div>

　　在这打字。

　　</div>

　　则不会被认为是空，因此与选择器不匹配。

　　选择空元素对于隐藏这些元素很有用，因为如果它们有填充，它们可能是奇怪的垂直和/或水平空白区域的原因。它对于在不再需要或有用空元素的动态环境中删除空元素也很有用。例：

　　*：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代码：

　　<divclass="container">

　　<p>

　　测试，测试，测试，测试，测试，测试，测试，测试，测试。

　　</p>

　　<p></p>

　　<p>

　　测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试！

　　</p>

　　<pclass="pseudo"></p>

　　<p><!--这里评论--></p>

　　<p><p></p>

　　</div>

　　css代码：

　　.container{

　　margin:40pxauto;

　　max-width:700px;

　　}

　　p:empty{

　　background-color:linen;

　　padding:15px;

　　}

　　.pseudo::before{

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

　　}

关于“css中的:empty是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。