移动端:empty常失效，因safari等浏览器对空白字符（换行、空格、注释）极为敏感，只要dom含任何文本节点即不匹配；安全写法是标签紧贴无空白，或用js通过textcontent.trim()===''判断并配合data-empty属性兜底。
移动端 :empty 为什么经常失效？
直接原因：移动端浏览器（尤其是 Safari 和旧版 Chrome）对 :empty 的判定比桌面端更严格，只要元素里有空白字符（换行、缩进、空格）或注释，就**不算 empty**。很多开发者在模板中写 <div class="placeholder"></div> 时习惯换行缩进，结果 DOM 实际是 <div class="placeholder">\n </div> —— 这个换行符让 :empty 失效。
:empty 的真实匹配条件与安全写法
:empty 只匹配**完全不含子节点（包括文本节点）的元素**。哪怕一个不可见的 或 HTML 注释 <!-- --> 都会破坏匹配。
- ✅ 安全写法：确保标签严格紧贴，如
<div class="placeholder"></div>（无换行、无空格） - ✅ 替代方案：用 JS 清理后再判断，比如
el.textContent.trim() === '' - ⚠️ 注意：
<div></div>在 Vue/React 模板里容易被编译器注入空白，需检查最终渲染的 HTML
移动端兼容性兜底策略
Safari 13.1+ 和 Android Chrome 80+ 原生支持 :empty，但 iOS 12 及更早版本不支持。如果目标用户包含老设备，不能只靠 CSS。
- 用
data-empty属性配合 JS 主动标记：if (!el.textContent.trim()) { el.setAttribute('data-empty', ''); } - 对应 CSS 写成
[data-empty] { display: none; }，兼容性拉满 - 避免用
:has()替代——它在 iOS Safari 目前仍不支持
和 :blank 的区别别搞混
:blank 是 CSS Selectors Level 4 提案，能匹配“视觉上为空”（比如只有空格或换行），但目前**没有任何主流移动端浏览器支持**。所有声称用 :blank 解决问题的方案，在真机上都会失效。
现在能用的，还是得回到 :empty 的严苛规则，或者用 JS 补位。最麻烦的地方不是写法，而是模板引擎和构建工具悄悄塞进来的空白——得盯着 DevTools 的 Elements 面板确认最终 DOM 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
