空白伪类和空伪类的区别

:empty 和 :blank(CSS 选择器级别 4 草案)有什么区别?除了空白目前仅在 Firefox 中有效.

div div{宽度:100 像素；高度:100px；显示:内联块；边距:5px；}div.emptyCell:empty{背景:#009688;}div.blankCell:空白{背景:#3F51B5；}

<div><div class="emptyCell"><!-- 只是一个注释--></div><div class="emptyCell"></div><div class="emptyCell"><!-- 只是一个评论--></div><div class="emptyCell"></div></div>
<div class="blankCell"></div><div class="blankCell"><!--不过是评论--></div><div class="blankCell"></div><div class="blankCell"><!--不过是评论--></div></div>

解决方案

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

css-tricks :blank

另外，来自 W3c 工作草案 4 级选择器:

<块引用>

:blank 伪类与 :empty 伪类相同，除了它另外排除 受空格影响的字符判断元素是否为空时处理 [CSS3TEXT].

例子:

<块引用>

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

<p></p>

what is the difference between :empty and :blank (CSS Selectors Level 4 draft) ? Other than the fact that blank only works in Firefox as of now.

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>

解决方案

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

Also, 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.

Example:

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

<p> 
</p>