:empty不能直接用于骨架屏占位，因其仅匹配完全无子节点（含空格、换行、注释）的元素，而骨架屏需子元素或伪元素实现视觉效果，一旦存在内容即失效；推荐用data-loading属性配合:not(:empty)控制状态。
为什么:empty不能直接用于骨架屏占位
:empty只匹配**完全不含子节点（包括文本节点、元素节点、注释节点）的元素**。骨架屏通常需要在数据加载时显示灰色块、波浪动画等视觉占位，而这些必须通过子元素（如<div class="skeleton-line"></div>）或伪元素（::before/::after）实现——一旦加了子节点或内容，:empty就失效了。
常见错误是写成这样，结果完全不生效：
.card:empty {
background: #f0f0f0;
min-height: 120px;
}
只要<div class="card"></div>里存在哪怕一个空格、换行符或注释，它就不是:empty。
用:empty配合content-visibility: hidden做轻量级占位开关
真正可行的思路是：让容器保持“空”，但通过外部状态控制其占位表现。现代方案中，content-visibility: hidden可配合:empty做条件渲染开关——它不移除DOM，但能抑制渲染开销，且不影响:empty判断。
-
:empty作为“是否为空”的检测钩子，仅用于样式分支 - 骨架结构由 JS 动态插入（或服务端预留），但初始不渲染；当数据未就绪时，JS 移除骨架节点，让容器变空
- 此时
.card:empty匹配成功，可启用骨架样式（比如背景渐变 + 骨架动画） - 数据加载后，JS 插入真实内容，容器不再
:empty，骨架样式自动退出
示例 CSS（搭配简单波浪动画）：
.card:empty {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading-skeleton 1.5s infinite;
}
@keyframes loading-skeleton {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
更稳妥的替代方案：用data-loading属性 + :not(:empty)组合判断
实际项目中，依赖 DOM 是否“真·空”太脆弱。推荐显式控制：始终保留骨架结构，用属性标记状态，再用:not(:empty)反向排除已填充内容的节点。
- HTML 初始结构包含骨架（避免 FOUC）：
<div class="card" data-loading="true"><div class="skeleton-item"></div></div> - JS 加载完成后，插入真实内容并移除
data-loading属性 - CSS 中用
.card[data-loading]:not(:empty)精准命中“有骨架但未加载完成”的状态 - 这样既绕过
:empty对空白符的敏感，又保留语义化控制权
关键点：不要指望:empty自动感知异步加载，它只是个静态结构判断器。
容易被忽略的兼容性与性能细节
:empty本身兼容性很好（IE9+），但和骨架屏搭配时，几个细节常被跳过：
- 服务端渲染（SSR）页面中，初始 HTML 若含空格/换行，
:empty会失效——需用构建工具压缩 HTML 或用display: contents包裹骨架容器来规避文本节点干扰 - 用
animation做波浪效果时，background-position动画在低端 Android WebView 上可能卡顿，建议改用transform: translateX()+mask或clip-path模拟 - 若骨架结构复杂（多个
div嵌套），即使容器:empty，其子元素仍可能触发重排——应确保骨架本身也用content-visibility: auto或contain: layout style隔离
最简健壮路径：别强求:empty承担状态管理，把它当做一个辅助视觉开关，真正的加载状态交给属性或类名控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
