:empty只匹配完全无内容（含空格、换行、注释）的元素；div因格式化产生的空白符被解析为文本节点而失效，p同理但常被误认为有效；需用el.normalize()清理或改用data属性+JS检测。
为什么:empty对空<div>不生效，但对<p>却可以？
因为:empty只匹配**完全无内容**的元素——连空格、换行、注释都不行。常见坑是：你写的<div class="hint"></div>在HTML里实际被格式化成<div class="hint">\n \n</div>，中间的换行和缩进会被当作文本节点，导致:empty失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动删掉标签间的空白（不现实）或改用
<div class="hint"></div>紧挨着写，无换行 - 更可靠的做法：用
:has(:not(:empty))反向检测（需现代浏览器支持），或退而求其次用JS监听input或blur事件补提示 - 若必须纯CSS，可配合
contenteditable属性 +:empty::before，但要注意contenteditable会改变语义和焦点行为
:empty::before能显示占位文字，但为什么点击后文字不消失？
因为:empty是静态伪类，它不响应DOM内容变化；一旦用户输入文字，元素立刻“不再为空”，::before自动消失——但前提是DOM真的更新了。常见错误是：你用JS给textContent赋空字符串""，看起来清空了，其实元素里还残留 或零宽空格\u200b。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 清空内容时用
el.textContent = ""，别用el.innerHTML = ""（可能残留不可见字符） - 输入框场景优先用
<input>或<textarea>的placeholder属性，它原生支持“有内容即隐藏” - 若坚持用
div[contenteditable]，需监听input事件并主动触发el.normalize()合并相邻文本节点，再检查el.innerText.trim() === ""
IE或旧版Edge里:empty完全不工作，有没有兼容方案？
IE11及更早版本不支持:empty，且不支持::before在空元素上渲染（即使元素真为空）。这不是bug，是规范实现差异。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃纯CSS方案，改用轻量JS：监听
DOMNodeInserted和DOMCharacterDataModified（旧版）或用MutationObserver观察子节点变化 - 服务端渲染时，直接根据数据状态加class：
<div class="hint hint--empty"></div>，然后CSS写.hint--empty::before - 如果项目已用React/Vue，别硬套
:empty，用v-if或{text.length ? null : <span>提示</span>}更可控
用:empty做表单提示时，为什么提交后校验失败，提示又回来了？
因为校验逻辑通常只改class或插入<span>，但没动原始容器的内容状态。比如你在<div id="email-field"></div>里JS插入<span class="error">邮箱格式错误</span>，此时#email-field已非空，:empty::before自然不显示——但用户删掉错误提示后，若没同步清空子节点，它仍不算“空”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 校验失败时，不要往容器里
appendChild错误信息，改用data-*属性标记状态：data-error="true"，再用[data-error]::after显示提示 - 若必须插DOM，校验通过后务必调用
el.replaceChildren()（或el.innerHTML = ""+el.normalize()）彻底清空 - 避免把提示文案和业务内容混在一个容器里——分离结构：
<div class="field"><input><div class="hint"></div></div>，用.field input:not(:placeholder-shown) + .hint控制提示显隐
真正难的不是写出:empty规则，而是判断“这个元素到底算不算空”——浏览器认的是DOM树里的文本节点，不是你肉眼看到的“什么都没写”。每次怀疑它不生效，先console.log(el.childNodes)看看。
