空白伪类和空伪类的区别答案

【问题标题】：difference between blank and empty pseudo-classes空白伪类和空伪类的区别
【发布时间】：2015-09-15 16:17:19
【问题描述】：

:empty 和 :blank（CSS 选择器级别 4 草案）有什么区别？除了空白目前仅在 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>

【问题讨论】：

:blank 也会选择包含空格的元素，而:empty 不会。对于 FF，有一个 :-moz-only-whitespace 等价物。
你可以看到这个developer.mozilla.org/en-US/docs/Web/CSS/%3Aempty

标签： css css-selectors

【解决方案1】：

:blank 伪类建立在 :empty 伪类之上。喜欢 :empty, :blank 将选择不包含任何内容的元素，或者仅包含 HTML 注释。 但是，:blank 也会选择元素包括空格， :empty 不会。

css-tricks :blank

另外，From the W3c Working Draft on selectors level 4:

:blank 伪类与 :empty 伪类相同，除了在判断一个元素是否为空时额外排除characters affected by whitespace processing [CSS3TEXT]。

例子：

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

<p> 
</p>

【讨论】：

【解决方案2】：

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

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

但需要注意的是，CSSWG 正在考虑更改 :empty，以便它也匹配仅包含空格的元素，从而避免需要一个单独且名称容易混淆的 :blank 伪类。这已解决just a few weeks ago。因此，当前 WD 中的 :blank 可能会或可能不会继续存在于下一个 WD 中，他们计划很快发布，因为 WD 上次更新是在 两年多前 .

如果发生这种情况，这个问题的答案将是：

:blank 是第 4 级选择器的原始提议，用于匹配没有内容或仅包含空格的元素。此后它已被删除，其功能被归入第 4 级 :empty，从而不再需要一个单独且名称容易混淆的伪类。

【讨论】：