请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
有时候,DOM里有很多空元素。空元素不是毫无用处,试看下面的HTML:
<div class="papa"> <span>★</span> <span></span> <span></span> <span></span> <span>★</span> </div>
上面的代码,如果没有做任何CSS设定,效果如下:
★
★
现在,我们来设置一下空元素 span:
<style>
.papa > span:empty { display: inline-block; width: 10px; height: 10px; background: pink; border-radius: 50%; }
如此,效果则如下:
★
★
:empty 规范冒号之前的元素,例如前例的 span:empty {} 用于设定 span 标签及 <span> 和 </span> 之间没有任何内容的样式。如果规范空的 p 标签,则写成 p:empty {} ,其它标签写法也如此;如果想规范某个区域下空的直系 div 标签,例如 .papa 下的空的 div,写成:.papa > div:empty {} 。
所谓空,指什么都没有。下面这个红色代码的 span 标签就不匹配前例的 .papa > span:empty {} :
<span>★</span> <span></span> <span></span> <span></span> <span> </span> <span>★</span>
为什么?因为他有一个空格,空格和★一样,都是文本,文本也是DOM中的节点,是内容,所以包含有它们的就不能算是空元素。
|