css - 空白和空伪类之间的区别

Question

: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>

Answer 1

The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not.

css-tricks :blank

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

The :blank pseudo-class is identical to the :empty pseudo-class, except that it additionally excludes characters affected by whitespace processing [CSS3TEXT] when determining whether an element is empty.

例子:

For example, the following element matches :blank, but not :empty, because it contains at least one linebreak, and possibly other whitespace:

<p> 
</p>