dialog:modal 样式未生效的根本原因是元素未被浏览器认定为模态栈顶的原生 ：需确保 showmodal() 已成功执行且未被关闭、元素为原生 、不在 shadow dom 中、页面无其他未关闭的模态对话框。
:modal 伪类只匹配当前被 showModal() 推入浏览器模态栈且处于栈顶的原生 <dialog></dialog> 元素——不是“弹出来了就生效”，而是“系统认定它是唯一模态容器”才触发。
为什么 dialog:modal 样式没生效？先查这三件事
绝大多数失效问题和 CSS 写法无关，而是 DOM 状态或调用逻辑不满足前提：
-
showModal()必须已成功执行，且未被后续close()或异常中断；控制台查dialog.open === true只说明它“开着”，不能证明是模态状态 -
<dialog></dialog>必须是原生元素，不能是div[role="dialog"]或任何封装组件；Shadow DOM 内部使用目前无规范支持，各浏览器行为不一致 - 页面中不能有多个
showModal()未关闭的<dialog></dialog>；后一个会覆盖前一个，但:modal仍只匹配最顶层那个——若你监听的是被盖住的旧dialog，它早已退出模态栈
:modal 和 ::backdrop 是两套独立机制
:modal 仅作用于 <dialog></dialog> 元素自身，对遮罩层、父容器、兄弟节点完全无影响：
- 要控制遮罩样式，必须单独写
dialog::backdrop，:modal规则里设的background-color或opacity不会作用到遮罩上 -
:modal规则中设置的transform或filter可能影响子元素渲染效果，但不会改变模态栈行为 - 不要写
dialog:modal:hover或dialog:modal:focus——:modal已隐含“当前被系统视为模态焦点容器”，这些组合无效
如何用 JS 辅助验证 :modal 是否真正匹配
仅靠样式是否生效很难断定状态，建议用 JS 配合检查：
- 确认调用成功：
try { dialog.showModal(); } catch (e) { console.error(e); }—— 某些情况下（如未插入 DOM、已有模态栈）会抛出DOMException - 检查是否在栈顶：
getComputedStyle(dialog).display !== 'none' && dialog.open && document.activeElement === dialog是弱信号，但不如直接观察:modal是否命中可靠 - 最稳妥方式：在 DevTools 的 Elements 面板中右键该
<dialog></dialog>→ “Force state” → 勾选:modal，看样式是否立即应用——如果能，说明选择器没问题，问题出在触发逻辑
真正起作用的样式逻辑非常干净：showModal() → 浏览器将该 <dialog></dialog> 推入模态栈 → :modal 匹配成功 → 对应 CSS 生效。中间没有 JS 干预、没有 class 切换、也没有 polyfill 介入空间。一旦发现不生效，优先检查是不是调用了 showModal()，而不是去调样式权重或兼容性补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
