問題描述
: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>
這篇關于空白偽類和空偽類的區別的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！