:empty会隐藏加载骨架是因为它匹配无任何子节点（含空白）的元素，而骨架容器初始为空；应改用:has()配合状态类区分加载态与空态，或js控制data-state。
为什么 :empty 会把加载中的骨架也干掉？
:empty 匹配的是「内部没有任何字符、文本节点、子元素」的元素。而加载骨架（比如 <div class="skeleton"></div>）本身是空的，但只要它被渲染出来，就满足 :empty 条件——哪怕你正用 JS 动态往里塞内容，只要 DOM 还没更新，它就还是空的。
所以直接写 .comment:empty { display: none; }，骨架和真正的空评论都会消失，根本等不到内容加载完成。
用 :has() + 类名区分加载态和空态
现代浏览器（Chrome 105+、Firefox 110+、Safari 15.4+）支持 :has()，可以反向检测子元素是否存在。关键思路是：不靠“是否为空”，而靠“是否有内容或加载标记”来判断是否该隐藏。
实操建议：
- 给加载中的评论块加一个明确的类，比如
is-loading或state-loading - 给已加载但无内容的评论块（真·空评论）加另一个类，比如
is-empty，或由后端/JS 显式标记 - 用
:has()排除加载中状态：.comment:not(:has(.is-loading)):empty { display: none; } - 如果不想依赖类名，也可用属性选择器：
.comment:not([data-state="loading"]):empty
这样骨架（带 is-loading）不会被匹配，只有既没加载标记、又没子节点的评论才被隐藏。
兼容老浏览器时的 fallback 方案
IE 和旧版 Safari 不支持 :has()，也不能指望 :empty 做智能判断。这时必须把控制权交给 JS。
推荐做法：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 初始渲染时，所有评论块都带
data-state="loading" - 加载完成后，JS 根据响应数据决定设为
data-state="loaded"或data-state="empty" - CSS 写成：
.comment[data-state="empty"]:empty { display: none; } - 骨架元素单独写样式，比如
.comment[data-state="loading"] .skeleton { display: block; }
注意：不要用 display: none 直接隐藏整个 .comment 加载块，否则骨架高度塌陷，页面会跳动。应该只隐藏内容区，留出骨架容器占位。
容易忽略的 DOM 细节：空格和换行也算内容
:empty 对空白极其敏感。哪怕模板里写了：
<div class="comment"> </div>
这个换行和缩进产生的文本节点会让它「不空」，:empty 就不生效。这常导致本地开发看着正常，构建后压缩 HTML 反而失效。
检查方法：在 DevTools 中选中元素，看 Elements 面板里有没有折叠的 #text 节点。
稳妥做法：
- 服务端或构建时压缩 HTML，移除注释和空白
- JS 初始化时用
element.textContent = ""清空再判断 - CSS 层面不依赖
:empty的绝对空判定，改用显式状态类更可靠
真正难的不是写对一行 CSS，而是让「空」的定义在 HTML、JS、CSS 三层保持一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
