空白伪类和空伪类的区别

问题描述

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

解决方案

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>

解决方案

css-tricks :blank

Also, From the W3c Working Draft on selectors level 4:

Example:

<p>
</p>

这篇关于空白伪类和空伪类的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！