:empty伪类在移动端卡片上基本不可靠，因换行、空格、插值残留等生成文本节点导致“看似空实则不空”；应改用.card-content:empty + .card-empty结构配合JS判断逻辑空。
:empty 伪类在移动端卡片上基本不可靠，直接写 .card:empty { display: none; } 大概率失效——因为 HTML 换行、模板空格、Vue/React 插值残留都会生成文本节点，导致“看似空，实则不空”。
为什么移动端卡片上的 :empty 总是不生效
移动端页面常由服务端模板（如 Nunjucks）或前端框架（如 Vue SFC）渲染，这些环境默认保留换行与缩进。浏览器会把源码里的回车解析成 #text 节点，哪怕你只写了：
<div class="card"> </div>
实际 DOM 中就是 <div class="card">\n</div>，含一个换行符文本节点，:empty 立刻退出匹配。
- Vue 单文件组件中
<div class="card">{{ content }}</div>，当content是空字符串时，渲染结果可能是<div class="card">\n</div>或<div class="card"> </div>，取决于模板编译配置 - 服务端渲染（SSR）未开启空白压缩时，
<div class="card"><%= data ? data.title : '' %></div>若data.title为空，输出的仍是带换行的结构 - 卡片内嵌了
<!-- debug -->注释，也会让:empty失效
真正能用的 CSS 方案：限定范围 + 兄弟选择器兜底
不要指望 :empty 自动识别“逻辑空”，而是用它配合显式控制的空状态提示区域，把判断权交给 JS 或服务端。
立即学习“前端免费学习笔记（深入）”；
- 给卡片加固定结构：
<div class="card"><div class="card-content"></div><div class="card-empty">暂无内容</div></div> - CSS 写成：
.card-content:empty + .card-empty { display: block; }和.card-empty { display: none; } - 这样只要
.card-content真·空（子节点数为 0），提示就显示；否则隐藏提示、卡片正常渲染 - 比全局
:empty更可控，也避免误杀其他空容器（比如图标占位<span></span>）
必须用 JS 补充的三种典型场景
当卡片内容由异步加载、用户输入或富文本编辑器生成时，DOM 结构无法保证“纯净”，JS 是唯一可靠路径：
- 加载完数据后，手动清理：
cardContentEl.textContent = ''; cardContentEl.classList.toggle('is-empty', !cardContentEl.textContent.trim()); - 监听动态插入（如评论列表追加）：
new MutationObserver(() => { /* 检查并更新 is-empty 类 */ }).observe(cardEl, { childList: true }); - 对富文本内容做预处理：
const isEmpty = htmlString.replace(/<[^>]*>/g, '').trim() === '';，再决定是否加is-empty类
别碰 :blank，也别信 PostCSS “polyfill”
:blank 在 Chrome 120+ 和 Safari 17.4+ 才支持，Firefox 完全没实现，且需手动开启实验 flag。截至 2026 年 5 月，生产环境写 .card:blank { display: none; } 等于放弃 60% 以上用户。
PostCSS 插件（如 postcss-blank-pseudo）不会转译成兼容代码，只是静默忽略或报错——它根本做不到 polyfill，因为 :blank 的语义依赖运行时文本内容判断，CSS 层面无法模拟。
真正麻烦的不是“怎么写”，而是“谁来定义空”：是 DOM 子节点数为 0？还是 textContent.trim() 为空？或是剔除 <script> 后仍无可见文本？这个边界必须在数据层或组件逻辑里明确，而不是丢给 CSS 猜。
