:empty 是 CSS 中匹配完全为空元素的选择器，即无子元素、无文本节点（含空格换行）、无内容；属性不影响判断，但空白字符会导致失效，不支持 IE8 及以下，可用 JavaScript 配合 class 替代。
:empty 是 CSS 中用于匹配完全为空的元素的选择器，即该元素既没有子元素（包括文本节点、空格、换行符等），也没有任何内容。
什么算“空”？
以下情况会被 :empty 匹配：
-
—— 纯空标签 -
立即学习“前端免费学习笔记（深入）”；
p不为空 —— 它含有span元素，所以 不匹配）
以下情况不会被匹配：
-
-
Hello—— 有文字内容 -
-
—— 属性不影响 :empty 判断
:empty 的基本用法
直接在选择器中使用 :empty 即可：
p:empty { display: none; }
li:empty::before { content: "（暂无内容）"; color: #999; }
注意事项与常见误区
- 空白字符不算“空”：HTML 中的换行、缩进、空格都会生成文本节点，导致 :empty 失效。建议服务端/JS 渲染时清理空白，或改用 JS 判断
-
不能链式伪类：如
div:empty:hover是合法的，但div:empty::before:hover无效（伪元素上不能加交互伪类） -
无法检测“视觉上为空”：比如含
display:none子元素、或仅含不可见字符（\u200B）的元素，:empty 仍会返回 false - 不支持 IE8 及更早版本，现代浏览器均支持
替代方案（当 :empty 不适用时）
如果需要更灵活的“内容为空”判断（如忽略空白、支持动态内容），需借助 JavaScript：
- 用
element.innerText.trim() === ""或element.textContent.replace(/\s/g, "") === "" - 配合 class 控制样式，例如 JS 检测后添加
is-empty类，再写.is-empty { ... }
