css只想选中空内容的元素怎么办_使用:empty伪类过滤无内容节点

:empty伪类仅匹配完全无内容（无子元素、无文本节点、不含空格换行符）的容器元素；自闭合标签及含空白字符或空子元素的元素均不匹配。

:empty 是 CSS 中专门用于匹配完全不包含任何内容（包括文本、子元素、空格、换行符等）的元素的伪类。

什么算“空”？

只有当一个元素：
- 没有子元素（包括注释节点以外的所有节点）
- 没有文本内容（哪怕是一个空格、一个换行符、一个制表符都不行）
- 不是自闭合标签（如 、
等本身不接受内容的标签，不会被 :empty 匹配）

常见误判场景

以下情况不会被 :empty 匹配：
- （含空格）
- \n（父容器换行也算文本节点）
- （含空子元素）
- 或 （它们不是容器型元素，且规范中明确排除）

实用写法示例

想隐藏所有真正为空的

li:empty, p:empty { display: none; }

td:empty { border: 1px dashed #ccc; }