CSS - 伪类 :empty

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>

本页