:empty伪类仅匹配无任何子节点（包括文本节点）的元素，换行、空格、注释均会导致失效；兼容性好但需确保DOM纯净，动态内容需JS配合。
:empty 伪类能自动隐藏真正空的标签，但前提是 DOM 结构里不能有任何文本节点——哪怕一个换行符或空格都会让它失效。
为什么
写了却没隐藏元素
最常见的原因是 HTML 源码中存在看不见的空白：换行、缩进、空格会被浏览器解析为
节点，导致元素“看似空，实则不空”。在开发者工具 Elements 面板里展开该元素，如果看到
（哪怕只有一行空白），
就不会匹配。
常见错误场景包括：
Vue/React 模板中写了
，但
是空字符串 → 渲染结果是
还是
，取决于模板引擎是否保留换行
服务端模板（如 PHP 的
）拼接时没
，输出了前后空格
HTML 中写了注释：
→ 注释是节点，
不匹配
和
到底该用哪个
是 CSS Selectors Level 4 提案，能匹配“只含空白字符”的元素（比如
），但它目前仅 Safari 15.4+ 和 Chromium 120+（需开启实验标志）部分支持，Firefox 完全不支持。生产环境别用。
立即学习
“
前端免费学习笔记（深入）
”；
匹配条件更严，但兼容性极好（Chrome 1+、Firefox 1+、Safari 3.1+、Edge 12+），且语义明确：子节点数必须为 0。
所以：
要兼容老浏览器或追求稳定 → 只用
需要容忍空格/换行 → 改用 JS：
别写
，它在绝大多数用户浏览器里直接被忽略
Flex/Grid 布局中隐藏空占位符的关键逻辑
当容器必须保留一个 DOM 节点（比如 React Portal 的 wrapper、表单字段的固定结构），但又希望它为空时不参与布局时，
是最轻量的解法。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
关键在于：
让元素彻底退出布局流，而不是
或
—— 后两者仍占空间，会干扰
或
的计算。
示例：
这样，当
真为空时，Flex 只剩两个子项，
实际等效于居中；一旦它有内容，就自然恢复三等分。
动态内容下
的局限与补救
是纯静态匹配，只在样式计算阶段起效，对 JS 动态增删内容无反应。比如你用
清空内容，
不会自动重新触发。
这时候得靠 JS 补位：
清空后手动触发重排：
（强制重绘）
更稳妥的做法是监听变化：
监听子节点变更，再调用
服务端渲染优先处理：输出前就
内容，比前端补救更干净、无 FOUC
真正卡住的往往不是选择器写法，而是 DOM 里那些看不见的换行、空格和注释——它们让
彻底失效，而你还在检查 CSS 有没有漏写分号。
:empty#text#text:empty{{ data }}data\necho "" . $content . ""trim():empty:empty:blank:blank \n:empty:emptyel.textContent.trim() === ''div:blank { display: none; }:emptydisplay: nonevisibility: hiddenopacity: 0justify-contentgrid-template-areas/* 父容器是 flex，两个按钮中间夹一个 portal 容器 */
.container { display: flex; justify-content: space-evenly; }
#portalContainer:empty { display: none; }#portalContainerspace-evenly:empty:emptyel.innerHTML = '':emptyel.innerHTML = ''; el.offsetHeight;MutationObserverel.classList.toggle('is-empty', !el.textContent.trim())trim():empty