:empty仅匹配childnodes.length为0的元素，即不含任何子节点（含空格、换行、注释）；验证需查devtools中样式是否高亮或运行console.log(el.childnodes.length)===0。
:empty 选择器的匹配条件非常严格
它只匹配 childNodes.length === 0 的元素——也就是说，连空格、换行符、注释节点都不能有。常见失效场景包括：
• 模板中写成 <div>\n</div>（换行被解析为文本节点）
• Vue/React 渲染后自动插入的空白文本节点
• 服务端模板里残留的空白或注释，比如 <div><!-- loading --></div>
验证是否真被匹配，最可靠的方式是打开 DevTools → Elements 面板 → 看该元素的 Styles 标签页中 div:empty 规则是否高亮；或者直接运行 console.log(el.childNodes.length) 确认返回值为 0。
:not(:empty) 是“有内容”的等价写法
虽然语义上不如 :has(*) 直观，但在 Safari 15.4+、Chrome 105+、Firefox 103+ 等主流浏览器中已稳定支持，且兼容性远好于 :has()。
• :not(:empty) 匹配的是「至少有一个子节点」的元素，包括仅含空格的 <div> </div>
• 它不区分文本节点和元素节点，只要 childNodes.length > 0 就成立
• 若你真正想表达“有子元素（非文本）”，应改用 :has(> *)，但需注意该选择器不支持父级上下文，也不能用于动画或 transition 触发器
避免把 :not(.class) 和 :not([class]) 混为一谈
这是实际项目中最常踩的坑：
• :not(.active) 匹配所有不带 active 类的元素，哪怕它有 btn、disabled 等其他类
• :not([class]) 才是真正匹配「完全没写 class 属性」的元素，比如 <p>hello</p>；而 <p class="">hello</p> 因为存在 class 属性，就不会被选中
• 想排除多个类？必须链式写： :not(.a):not(.b)，不能写成 :not(.a, .b)（语法错误）
• 同理，要选“不含 title 属性”的元素，必须用 *:not([title])，不是 *:not(.title)
当 :empty 不可用时，别硬扛 CSS
框架渲染、构建流程、服务端模板几乎都会在 DOM 中注入不可见节点，导致 :empty 失效成为常态。
• 服务端：用 Vite 插件 vite-plugin-html 或 Webpack 的 html-webpack-plugin 配置 minify 去除空白
• 前端控制：用 JS 动态加类更可靠，例如 el.classList.toggle('is-empty', !el.textContent.trim())
• 表单类场景可退而求其次，用 input:not(:placeholder-shown):valid 或 textarea:placeholder-shown 模拟“空”状态
真正难的从来不是写一行 div:empty { display: none; }，而是让那个 div 到达浏览器时，真的什么都没带——连一个回车都要被干掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
