::backdrop未生效最常见原因是目标元素未触发全屏或模态状态；它仅在fullscreen元素、showModal()调用的或原生模态（如alert）中渲染，普通fixed遮罩不触发。
为什么 ::backdrop 没有生效
最常见原因是目标元素没触发“全屏”或“模态”状态——::backdrop 只在 fullscreen 元素、<dialog></dialog> 打开时、或某些浏览器原生模态（如 alert()）下才渲染，普通 position: fixed 遮罩层完全不触发它。
检查是否误以为任意遮罩都能用 ::backdrop：它不是通用背景覆盖层，而是浏览器为特定“系统级模态上下文”自动插入的伪元素。
- 对
<dialog></dialog>，必须调用showModal()（不是show()），否则::backdrop不激活 - 对全屏元素，需通过
element.requestFullscreen()进入，CSS 的fullscreen伪类也不等于::backdrop - Chrome 113+ 才支持
<dialog></dialog>的::backdrop；Safari 目前（2024）仍不支持<dialog></dialog>的::backdrop，仅支持全屏场景
::backdrop 样式写在哪才有效
必须用足够优先级的规则匹配到伪元素本身，且不能被父容器的 overflow: hidden 或 transform 截断。
- 选择器必须显式包含伪元素：
dialog::backdrop、:fullscreen::backdrop，写成dialog::backdrop, ::backdrop会导致后者无效（无宿主元素） - 确保没有更早定义的
background覆盖了它，例如dialog { background: white; }不影响::backdrop，但若写了dialog::backdrop { background: none; }就真看不见了 - 避免给
<dialog></dialog>父容器设transform（如scale(0.9)），这会让 backdrop 渲染区域错位甚至不可见
调试 ::backdrop 是否被创建
它不会出现在 DOM 树中，但可在 DevTools 的“Styles”面板里手动输入选择器查看是否匹配成功，或用 JS 检测是否处于模态状态。
立即学习“前端免费学习笔记（深入）”；
- 在控制台运行
document.fullscreenElement，非null表示当前有全屏元素，::backdrop应可用 - 对
<dialog></dialog>，检查dialog.open === true && dialog.hasAttribute('open') && getComputedStyle(dialog).display !== 'none'不够，必须确认是showModal()触发的 - 在 Styles 面板中，右键元素 → “Force element state” → 勾选
:fullscreen或打开<dialog></dialog>后直接输入dialog::backdrop看能否高亮并编辑样式
替代方案：当 ::backdrop 不可用时怎么办
别硬扛兼容性问题。真实项目中，::backdrop 适合渐进增强，主逻辑应依赖显式遮罩层。
- 用
<div class="modal-backdrop"> + <code><dialog class="modal-content"></dialog>组合，手动控制显示/隐藏和 z-index - 监听
dialog的close和cancel事件，同步切换 backdrop 元素的hidden属性或display - 对 Safari 用户，检测
CSS.supports('selector(::backdrop)')返回false时降级为自定义 backdrop
真正容易被忽略的是：即使所有条件满足，::backdrop 默认透明，不设 background 就等于没写——它不像 ::before 那样有隐式占位，空样式 = 不可见。
