:modal伪类目前在任何主流浏览器中都不支持，HTML标准中也不存在；实际可用的是dialog[open]、dialog::backdrop和:focus-within等替代方案，并需JS配合class控制模态状态。
:modal 伪类目前在任何主流浏览器中都不支持，它不能和 HTML 原生 你看到的文档或示例里出现 :modal，基本是误传、过时草案残留，或是把框架类名（如 Bootstrap 的 .modal）错当成原生 CSS 伪类。
为什么 :modal 写了也无效？
常见误解来源包括：
- 把早期 CSSWG 草案中短暂出现又删除的
:modal当成已实现特性 - 把 Vue/React 组件库中
v-model或showModal方法的命名，当成 CSS 可用的伪类 - 把
:focus-within或:has(:focus)这类模拟焦点状态的选择器，记混为:modal
截至 2026 年 10 月，Chrome、Firefox、Safari、Edge 均未实现 :modal。HTML 标准里也根本不存在这个伪类——它不是被“延迟支持”，而是从未被标准化。
真正能响应
可用且稳定的选择器只有这些：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
dialog[open]：匹配所有设置了open属性的 -
dialog:not([open])：配合display: none实现默认隐藏 -
dialog::backdrop：仅当调用showModal()时生效，用于样式化遮罩层 -
dialog:focus-within：可近似判断当前对话框是否获得焦点（但不区分模态/非模态）
注意：dialog::backdrop 在 Firefox 中至今不支持；Safari 15.4+ 支持但有 z-index 渲染异常，需显式设 z-index: 2147483647。
想控制“模态态”样式，实际该怎么做？
纯 CSS 拿不到“是否处于模态栈顶层”这个状态，必须靠 JS 同步：
- 调用
dialog.showModal()后，手动加一个 class，比如dialog.classList.add('is-modal') - 监听
dialog的close和cancel事件，移除该 class - 用
dialog.isModal属性（只读）判断当前是否由showModal()打开（但该属性不可用于 CSS 选择）
例如：dialog.isModal === true 时，你可以触发 blur 背景、禁用 body 滚动等逻辑——但这些都得写在 JS 里，CSS 无法直接响应。
别在生产环境里留 :modal 选择器。它不会在未来某天突然生效，它根本不在浏览器的实现路线图上。真正要区分模态与非模态行为，老实用 JS 控制 class，再用 class 驱动样式。
