空白和空伪类之间的区别

Question

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

Answer 1

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

css-tricks:空白

此外,从选择者第4级的W3c工作草案:

:blank伪类与:empty伪类相同,只是它在确定元素是否为空时还排除了受空格处理 [CSS3TEXT] 影响的字符.

例:

例如,以下元素匹配:blank,但不匹配:empty,因为它至少包含一个换行符,可能还有其他空格:

<p> 
</p>

Answer 2

:empty将匹配所有给定的元素，因为就CSS而言，仅包含注释节点的元素节点实质上与没有子元素的元素节点相同。这就是为什么您看不到比赛之间的差异。

不同之处在于，它们:blank匹配仅由空格字符组成的元素，否则不将其视为:empty。这是因为空格节点实际上只是仅包含空格的文本节点，而带有文本节点子元素的元素不是空元素。

但是，需要注意的重要一点是CSSWG正在考虑进行更改:empty，使其与仅包含空格的元素匹配，从而避免了使用单独的且易混淆的命名:blank伪类的需要。这个问题在几周前就解决了。因此，:blank正如当前WD所具有的功能，在下一个WD中可能会或可能不会继续存在，他们计划在WD最近一次更新超过两年前计划不久发布该版本。

如果确实发生了，那么这个问题的答案将是：

:blank是“选择器”第4级的原始建议，用于匹配没有内容或仅包含空格的元素。此后已将其删除，并将其功能归入第4级:empty，从而消除了对单独的且易混淆命名的伪类的需求。