dialog:modal 仅在 dialog 被 showmodal() 推入模态栈且为最顶层时匹配，需确认 showmodal() 成功执行、元素为原生 dialog、无多个未关闭模态对话框，并用 dialog.open 和 getcomputedstyle 验证状态。
:modal 伪类只在 dialog 元素被 showModal() 推入浏览器模态栈时才匹配——不是“弹出来了就生效”，而是“系统认定它是当前唯一模态容器”才触发。其他方式（show()、open 属性、CSS 控制显隐）全部无效。
为什么 dialog:modal 样式没生效？先查这三件事
绝大多数失效问题和 CSS 写法无关，而是 DOM 状态或调用逻辑不满足前提：
-
showModal()必须已成功执行，且未被后续close()或异常中断；控制台查dialog.open === true只说明它“开着”，不能证明是模态状态 -
<dialog></dialog>必须是原生元素，不能是div[role="dialog"]或任何封装组件；Shadow DOM 内部使用目前无规范支持，各浏览器行为不一致 - 页面中不能有多个
showModal()未关闭的dialog；后一个会覆盖前一个，但:modal仍只匹配最顶层那个——若你监听的是被盖住的旧 dialog，它早已退出模态栈
:modal 和 ::backdrop 是两套独立机制
:modal 仅作用于 dialog 元素自身，对遮罩层、父容器、兄弟节点完全无影响。要改遮罩样式，必须单独写 dialog::backdrop：
dialog:modal {
border: 2px solid #3b82f6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
注意：dialog:modal::backdrop 是非法选择器，浏览器直接忽略；:modal 不继承、不传播、不联动，它就是一个纯粹的状态标记。
别在 :modal 规则里加交互伪类
:modal:hover、:modal:focus 这类组合毫无意义——:modal 已隐含该元素是当前焦点容器，且浏览器禁止外部聚焦穿透。实际效果等同于只写 :modal，还可能因选择器权重问题干扰其他规则。
真正需要响应用户操作的地方，应该监听事件：
- 点击遮罩关闭：监听
dialog的click事件，用e.target === dialog判断是否点在 backdrop 区域（Safari 15.4–16.3 需 fallback 坐标判断） - Esc 关闭：无需监听，
showModal()自带该行为，关闭后触发close事件 - 焦点管理：
showModal()会自动聚焦第一个可聚焦子元素；若需自定义，应在dialog:modal生效后手动.focus()，而非依赖 CSS
最易被忽略的一点：:modal 匹配与否，完全由浏览器模态栈决定，JS 无法干预、polyfill 无法模拟、class 切换无法伪造。发现不生效，第一反应不该是调样式优先级，而是用 console.log(dialog.hasAttribute('open'), dialog.open) 和 getComputedStyle(dialog).display 确认它是否真的进入了模态流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
