:not(:empty)对动态内容无效，因为:empty仅在dom初始解析时匹配无任何子节点的元素，不响应javascript插入内容后的dom变化，且空格、换行等易致误判；推荐用data-loaded属性替代，确保样式与js状态同步。
not(:empty) 为什么对动态内容无效
因为 :empty 只匹配**完全不含子节点（包括文本节点、元素节点、注释节点）的元素**，而 JavaScript 动态插入内容后，浏览器不会自动触发 CSS 重计算来“唤醒” :not(:empty) 的匹配逻辑——它只在 DOM 初始解析时生效一次。常见现象是：容器明明已有文字或子元素，边框却不出现。
典型错误场景：div#status 初始为空，JS 加载完数据后填入 "加载成功"，但 div:not(:empty) { border: 1px solid #ccc; } 没反应。
-
:empty不感知 DOM 变化，也不监听 textContent 或 innerHTML 改变 - 空格、换行符、注释都会让元素“非空”，但 JS 插入时常带前导/尾随空格，导致误判为非空；反之，若清空时只删了元素没清空文本节点，
:empty仍不匹配 - 服务端渲染（SSR）或 hydration 前后状态不一致时，CSS 规则可能被客户端样式覆盖或失效
用 data-loaded 属性替代 :not(:empty)
更可控、可预测，且与 JS 生命周期对齐。加载完成时显式设置属性，CSS 直接响应这个布尔信号。
示例：
立即学习“前端免费学习笔记（深入）”；
/* CSS */
.container[data-loaded="true"] {
border: 1px solid #007bff;
}JS 中配合加载逻辑：
- 请求开始前，可先移除属性：
el.removeAttribute('data-loaded') - 成功回调里设置：
el.setAttribute('data-loaded', 'true') - 失败或重试时，建议统一清除：
el.removeAttribute('data-loaded')，避免残留状态误导 UI
如何确保“仅在加载成功后显示容器”
光加边框不够，用户需要的是“从无到有”的视觉浮现感。关键在控制 display 或 visibility，而非仅靠边框出现来暗示加载完成。
- 初始隐藏容器：
.container { display: none; }，成功后再切为display: block（或其它所需值） - 若需过渡效果，改用
opacity: 0; visibility: hidden;+transition，并在 JS 中切换类名，避免 display 切换导致 layout shift - 务必在 JS 加载逻辑中统一管理容器可见性——不要依赖 CSS 自动推断，否则容易出现“边框有了但内容还没渲染”或“内容闪现后才加边框”
兼容性与性能提醒
:not(:empty) 在 IE9+ 和所有现代浏览器都支持，但它的语义局限性比兼容性问题更值得警惕。用 data- 属性方案反而更轻量、更易调试。
- 浏览器 DevTools 中可直接查看元素是否含有
data-loaded，而:not(:empty)的匹配结果无法在 Elements 面板直观验证 - 频繁操作
innerHTML后又期望:not(:empty)生效，不如每次更新后手动 toggle 类或属性——简单、确定、不依赖 CSS 引擎内部时机 - 如果容器内含 SVG、iframe 或 Web Component，它们的子树是否算“内容”会进一步模糊
:empty行为，此时data-loaded完全规避歧义
真正难的不是写对那行 CSS，而是让样式变化和 JS 状态严格同步——这点上，属性驱动永远比伪类推断靠谱。
