空白和空伪类之间的区别

时间:2015-09-15 07:30:17

标签: css css3 css-selectors

有什么区别: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>

2 个答案:

答案 0 :(得分:10)

  

:blank伪类构建于:empty伪类。喜欢   :empty,:blank将选择根本不包含任何内容的元素,或者   仅包含HTML注释。 但是,:blank也会选择元素   包括空格,其中:空不会

ProcessStartInfo

另外,css-tricks :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中,无需单独的,容易混淆的伪类。