:modal伪类根本不存在于任何浏览器引擎或CSS标准中，它源于对草案、UI库类名或伪类的误认；真正可用的是dialog[open]属性选择器，用于控制dialog显隐。
不能。:modal 伪类根本不存在于任何已发布的浏览器引擎中，也不在 HTML 或 CSS 标准里。
为什么查得到 :modal 却用不了？
你看到的 :modal 几乎都来自以下三类混淆：
- 把早期 CSSWG 草案中短暂出现又迅速被移除的实验性提议当真（它从未进入实现阶段）
- 把 Vue 的
v-model、Bootstrap 的.modal.show类名或 Ant Design 的组件命名误认为是原生 CSS 伪类 - 把
:focus-within或:has(:focus)这类用于模拟“活跃状态”的选择器记错成:modal
真正能用的原生模态框状态选择器只有 dialog[open]
现代浏览器对 元素的支持已稳定（Chrome 98+、Firefox 99+、Safari 15.4+），但它的打开状态只能通过属性判断：
dialog[open] {
opacity: 1;
pointer-events: auto;
}
dialog:not([open]) {
display: none;
}
注意两点：
-
dialog[open]只反映 DOM 属性是否设置，不区分“模态”或“非模态”模式（showModal()vsshow()） - 浏览器不会把“是否处于模态焦点栈顶层”这个内部状态暴露为 CSS 伪类——它不属于 CSSOM
:has(dialog[open]) 或 body:has(dialog[open]) 也不可靠
有人试图用 :has() 捕捉模态上下文，例如：
body:has(dialog[open]) .page-content {
filter: blur(2px);
}
这存在严重问题：
-
:has()对open属性变更的响应在 Safari 和 Chrome 中有明显延迟，甚至不触发重绘 - 它无法区分多个
同时打开的情况，也无法识别showModal()强制焦点锁定行为 - 语义上，
:has()是“存在性检测”，不是“模态态检测”——它和可访问性、键盘导航、屏幕阅读器无任何关联
真正要控制样式或行为，老实用 dialog[open] 做基础显隐，再配合 JS 监听 open / close 事件同步 class、aria-hidden 和焦点管理。别等 :modal，它不会来——这不是兼容性问题，是根本不存在的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
