:modal伪类不存在且不被任何主流浏览器支持，它既非CSS标准也未被HTML定义；真正可用的是基于<dialog open>属性的CSS选择器及JavaScript事件监听。
:modal 伪类在现代 CSS 中无法使用——它不是标准，也不被任何主流浏览器支持。
为什么:modal根本不能用
你查到的 :modal 很可能来自过时草案、拼写混淆（比如把 :focus-within 或 :has() 记错），或是框架/库的 class 名（如 Bootstrap 的 .modal）。CSSWG 曾在早期 :has() 讨论中短暂提过 :modal，但早已移除；HTML 标准里从未定义它。截至 2026 年 9 月，Chrome、Firefox、Safari、Edge 全都不识别该伪类，声明了也无效。
真正可用的原生模态状态检测方式
浏览器只通过 <dialog> 元素的 open 属性暴露“是否打开”这一状态，CSS 只能基于此做样式响应：
-
dialog[open]—— 精确匹配已打开的<dialog>，推荐作为默认起点 -
dialog:not([open])—— 配合display: none隐藏未打开状态 -
dialog:focus-within—— 可近似判断“当前对话框是否获得焦点”，但不区分模态/非模态模式，且依赖内部有可聚焦子元素 - 不要用
:has(dialog[open]:not(:focus-within))这类组合：逻辑错误（<dialog>打开后通常强制聚焦）、:has()对open属性变更响应不稳定（尤其 Safari）、且无浏览器将“模态栈顶层”状态映射为 CSS 伪类
想控制遮罩层或焦点行为？必须靠 JS 同步
<dialog> 的遮罩（dialog::backdrop）和焦点限制是渲染引擎内部行为，CSS 无法感知“是否处于模态栈顶层”。如果业务需要精确响应模态激活/退出（比如禁用背景滚动、同步 aria-hidden、记录埋点），只能监听 dialog 的 show / close / cancel 事件，并用 JS 切换 class 或操作 DOM：
立即学习“前端免费学习笔记（深入）”；
- 给
<body>加data-modal-active属性，再用body[data-modal-active]控制全局样式 - 用
dialog.showModal()触发后手动document.body.style.overflow = 'hidden' - 避免直接操作
z-index数值，改用 CSS 变量统一管理层级，例如--z-modal: 1050
真正麻烦的从来不是“怎么让弹窗显示出来”，而是“怎么让它不被屏幕阅读器跳过、不被 iOS 键盘顶出视口、不被 <select> 穿透、不破坏键盘 Tab 顺序”——这些都得靠 JS 协同完成，:modal 不会帮你解决其中任何一个。
