有什么区别：empty和：blank(CSS Selectors Level 4 draft)？
除了空白仅适用于Firefox的事实.
除了空白仅适用于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>
解决方法
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.
另外,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 07002 [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>
