:empty 仅匹配无任何子节点（含文本、元素、换行符）的元素，不看渲染结果；dom 中残留注释、空格或换行即失效，需用 innerhtml='' 彻底清空。
什么时候 :empty 会生效？
:empty 只匹配完全不含任何子节点的元素，包括文本节点（哪怕是一个空格、换行符都会让它失效）。它不看 CSS 渲染结果，只看 DOM 结构。
- 元素内只有注释（
<!-- -->）或 -
<div></div>匹配:empty；<div> </div>（含空格）不匹配 -
<div><span></span></div>不匹配——因为有<span></span>子元素 - 动态清空内容后，需确保 DOM 真的“删干净”，比如用
el.innerHTML = ''，而非el.textContent = ''（后者保留子元素结构）
:empty 和 display: none 搭配的常见陷阱
直接写 div:empty { display: none; } 看似合理，但容易被覆盖或忽略渲染时序：
- 如果父容器设置了
display: flex或grid，而子元素是:empty且display: none，部分浏览器（如 Safari）可能仍占布局位置（尤其当用了flex: 1类规则） - 更稳妥的做法是搭配
visibility: hidden或用height: 0; overflow: hidden; margin: 0; padding: 0;彻底消除影响 - 若需过渡动画，
:empty本身无法触发 CSS 过渡（状态切换无中间帧），得配合 JS 切换 class 控制 opacity/height
替代方案：为什么有时该放弃 :empty？
:empty 对「视觉上为空」无能为力，比如：
- 后端返回空数组，前端渲染了
<ul><li></ul>——<ul></ul>不为空，:empty失效 - 表单校验后清空输入但留着 placeholder，DOM 并非空
- 使用 Shadow DOM 或框架（React/Vue）时，真实 DOM 节点常被包裹或代理，
:empty判定失准
此时更可靠的是：
- 服务端或 JS 主动加
data-empty属性：<ul data-empty="true"></ul>，再写ul[data-empty="true"] - Vue 用
v-if="list.length"，React 用{list.length > 0 && <list></list>}，把控制权交还逻辑层
一个真正可用的空状态样式组合
不是只靠 :empty，而是分层兜底：
/* 基础空状态隐藏 */
.list:empty,
.grid:empty,
.table tbody:empty {
display: none;
}
<p>/<em> 配套的空状态提示（兄弟元素） </em>/
.list:empty + .empty-state,
.grid:empty + .empty-state {
display: block;
}</p><p>/<em> 防止空容器塌陷干扰布局 </em>/
.list:empty {
min-height: 40px; /<em> 给个最小高度，避免父容器跳动 </em>/
}</p>
注意：空状态提示元素必须是目标元素的紧邻兄弟元素，否则 + 选择器不生效；如果结构不支持相邻，就得用 JS 切换类名来联动控制。
空状态不是纯 CSS 问题，而是 DOM 状态、渲染时机和样式响应的交界点。最容易被忽略的是：你以为清空了内容，DOM 却悄悄留了个 <!----> 或换行符——建议在 DevTools 里右键「Edit as HTML」确认真实结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
