:empty
Baseline 廣泛可用 *
:empty CSS 偽類表示沒有任何子元素的元素。子元素可以是元素節點或文字（包括空白）。註釋、處理指令和 CSS content 不會影響元素是否被視為空。
試一試
div:empty {
outline: 2px solid deeppink;
height: 1em;
}
<p>Element with no content:</p>
<div></div>
<p>Element with comment:</p>
<div><!-- A comment --></div>
<p>Element with nested empty element:</p>
<div><p></p></div>
注意：在 Selectors Level 4 中，:empty 偽類被更改為類似於 :-moz-only-whitespace，但目前還沒有瀏覽器支援。
語法
css
:empty {
/* ... */
}
無障礙
螢幕閱讀器等輔助技術無法解析空的互動式內容。所有互動式內容都必須有一個可訪問名稱，該名稱透過為互動式控制元件的父元素（錨點、按鈕等）提供文字值來建立。可訪問名稱將互動式控制元件暴露給可訪問性樹，這是一個用於與輔助技術通訊資訊的 API。
提供互動式控制元件可訪問名稱的文字可以使用屬性組合隱藏，這些屬性可以在視覺上將其從螢幕上移除，但仍可被輔助技術解析。這通常用於僅依靠圖示傳達目的的按鈕。
示例
HTML
html
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
<!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
<p>
<!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
</p>
</div>
CSS
css
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}
結果
規範
| 規範 |
|---|
| 選擇器 Level 4 # the-empty-pseudo |
瀏覽器相容性
載入中…