如何利用CSS伪类:empty隐藏空占位容器内容？

本文共计834个文字，预计阅读时间需要4分钟。

常见现象是写了div:empty，但页面上明显没有写内容的容器——其实基本没有隐藏。原因通常是因为元素内部有空白字符（空白格、换行、制表符）或注释，3:empty会将这些视为非空。它只认为具有字面意义的零字节为空，连续的文本节点（哪怕只是回车）也不会被认为空。

• HTML 中换行缩进自动生成的文本节点，会让 :empty 失效
• 内联注释 <!-- -->、JS 注入的空文本节点，同样破坏“空”条件
• :empty 不匹配含 display: none 子元素的容器，只看 DOM 结构，不看渲染结果

:empty 和 :has(*) 的行为差异

想“隐藏真正没内容的容器”，:empty 很脆；而 :has(*) 是反向思路：匹配“至少有一个子节点”的元素，再取反更可控。但注意兼容性：:has() 在 Safari 15.4+、Chrome 105+ 支持，旧版 Edge/IE 完全不支持。