Welcome, Old Sport!

css系列教程 – 伪元素:empty

by ilikecss ON 2016/08/23 937

不可思议的css,css实战系列教程之伪元素:empty:empty是一个css的伪元素(pseudo-element),表示选择器选择的元素为空。没有子元素(包括文本节点)的每个元素,则为空。

以下代码符合伪元素:empty选择器范围

<div><!-- COMMENT HERE  --></div>

不符合伪元素:empty选择器范围

<div>
    这里是内容
</div>

伪元素:empty有助于隐藏一些页面中特殊情况,比如空格并且这些元素带有padding属性。也可以用于删除某些动态内容中的空元素无论它是否有实际内容。

需要注意的是,伪元素:empty并不影响::after伪类的使用。

div::after {
    content: "虽然我是空元素DIV,但还是会继承伪类属性"
}

如果你在伪元素:empty中间套另一个标签或增加一个空格,那这个不在选择器范围。参考下面代码:

<p> </p>
<p><span></span></p>

如果标签没有闭合符号,则第一个被认为符合伪元素:empty

<p><p>

浏览器支持表:

Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.6+ 8+ 4.4+ none

IE8以上所有浏览器支持该伪元素。

目前还没有评论



TOP