有什么区别:empty和:blank(CSS Selectors Level 4 draft)? 除了空白仅在Firefox中起作用的事实。
div div{
width:100px;
height:100px;
display:inline-block;
margin:5px;
}
div.emptyCell:empty{
background:#009688;
}
div.blankCell:blank{
background:#3F51B5;
}
<div><div class="emptyCell"><!-- nothing but a comment--></div>
<div class="emptyCell"></div>
<div class="emptyCell"><!-- nothing but a comment--></div>
<div class="emptyCell"></div>
</div>
<div>
<div class="blankCell"></div>
<div class="blankCell"><!-- nothing but a comment--></div>
<div class="blankCell"></div>
<div class="blankCell"><!-- nothing but a comment--></div>
</div>
答案 0 :(得分:10)
:blank伪类构建于:empty伪类。喜欢 :empty,:blank将选择根本不包含任何内容的元素,或者 仅包含HTML注释。 但是,:blank也会选择元素 包括空格,其中:空不会。
:blank伪类与:empty伪类相同, 除了在确定元素是否为空时另外排除From the W3c Working Draft on selectors level 4 [CSS3TEXT]。
示例:
例如,以下元素匹配:空白,但不匹配:空, 因为它至少包含一个换行符,也可能包含其他换行符 空白:
<p>
</p>
答案 1 :(得分:4)
:empty
将匹配所有给定元素,因为除了CSS之外,只包含注释节点的元素节点与没有子节点的元素节点基本相同。这就是为什么你没有看到比赛之间的差异。
不同之处在于:blank
匹配仅由空格字符组成的元素,否则这些字符不被视为:empty
。这是因为空白节点实际上只是仅包含空格的文本节点,而带有文本节点子元素的元素不是空元素。
重要的是要注意,CSSWG正在考虑更改:empty
,以便它匹配仅包含空格的元素,从而避免需要单独且容易混淆的:blank
伪类。这已得到解决just a few weeks ago。因此,当前WD中的:blank
可能会或可能不会继续存在于下一个WD中,他们计划很快发布,因为WD上次更新超过两年前> EM>
如果发生这种情况,这个问题的答案将是:
:blank
是选择器级别4的原始提案,用于匹配没有内容或仅包含空格的元素。它已被删除,其功能包含在4级:empty
中,无需单独的,容易混淆的伪类。