CSS 伪类选择器 :empty 表示一个空的元素，没有子元素。
一个元素可以称为空：
- 如果它的标签之间没有任何内容。例如：<div></div>
- 如果元素包含代码注释。例如：<div><!--一个空元素，带有注释 --></div>
- 如果元素的 CSS 生成内容，例如从伪元素（如 ：：before 或 ：：after）生成内容。例如：div：：before {content："Empty element"}
- 像 <br />、<hr /> 和 <img /> 这样的自闭合元素也被认为是空的。
语法
:empty {
/* ... */
}
可访问性问题：辅助技术（如屏幕阅读器）无法解析为空的交互式内容。因此，所有交互式内容都必须具有可访问的名称，该名称可以由交互式控件的父元素的文本值提供;这反过来又使辅助技术能够使用。
CSS :empty 示例
下面是一个示例 :empty pseudo-class，应用于 <p> 标签：
<html>
<head>
<style>
p:empty {
width: 200px;
height: 30px;
background: magenta;
}
div {
border: 3px solid black;
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<h2>:empty example</h2>
<div>
<p>Not an empty paragraph</p>
<p></p>
<p>Not an empty paragraph</p>
</div>
</body>
</html>
下面是一个示例 :empty pseudo-class，应用于 <div> 标签：
<html>
<head>
<style>
#circle {
background-color: red;
height: 100px;
width: 100px;
border-radius: 50%;
}
#circle:empty {
background-color: yellow;
}
div {
display: inline-block;
color: black;
}
</style>
</head>
<body>
<div id="circle"><!-- Yellow circle --></div>
<div id="circle"><!-- not an empty element-->
<h2>:empty</h2>
</div>
<div id="circle">
<p>
<!-- Non-collapsible whitespace and elements around this comment. -->
</p>
</div>
</body>
</html>
