:modal伪类仅对调用showModal()的原生元素生效，需Chrome 105+/Firefox 103+/Safari 15.6+支持，且同一时间仅最顶层模态dialog匹配，样式仅作用于dialog自身，不涉及遮罩层或父兄弟元素。
:modal 伪类只对调用 showModal() 的 生效，用 show() 或 CSS 控制显隐的都不会匹配它。这是最关键的判断依据——不是“弹出来了就生效”，而是“必须走模态栈机制”。
确认浏览器支持与基础结构
Chrome 105+、Firefox 103+、Safari 15.6+ 均已支持 :modal，无需前缀。但要注意： 必须是原生元素，不能是 div 模拟的；且页面中同一时间只能有一个 :modal 匹配目标（模态栈顶唯一）。
- 确保 HTML 中存在
- 用
document.getElementById("myDialog").showModal()触发，而非.show()或.open = true - 避免在同一个页面中连续调用多个
showModal()而不关闭前一个——后一个会覆盖前一个，但:modal仍只匹配最顶层那个
:modal 样式只作用于模态状态下的 dialog 元素本身
:modal 是一个伪类选择器，它不会影响遮罩层（::backdrop）、父容器或兄弟元素。要控制遮罩，得单独写 dialog::backdrop。
-
:modal规则中设置的background-color、border、box-shadow等，只渲染在自身上 - 它不继承，也不触发重排以外的副作用；但若设置
transform或filter，可能影响子元素渲染效果 - 不要试图用
:modal:hover或:modal:focus——:modal已隐含“当前被系统视为模态焦点容器”，这些组合无效
常见误用：为什么你的 :modal 样式没生效？
最常踩的坑不是写错语法，而是触发方式不对或 DOM 状态不满足条件。
- 写了
dialog:modal { ... }却用.show()打开——此时:modal不匹配，样式完全不应用 - 在
上加了open属性（如），但没调用showModal()——该元素处于“打开但非模态”状态，:modal不触发 - CSS 文件加载顺序导致
:modal规则被其他更具体的选择器覆盖（例如dialog#myDialog权重更高） - 在 Shadow DOM 内部使用
:modal——目前规范未定义其在 shadow tree 中的行为，各浏览器表现不一致，应避免
真正起作用的样式逻辑非常干净：showModal() → 浏览器将该 推入模态栈 → :modal 匹配成功 → 对应 CSS 生效。中间没有 JS 干预、没有 class 切换、也没有 polyfill 介入空间。一旦发现不生效，优先检查是不是调用了 showModal()，而不是去调样式权重或兼容性补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
