dialog 元素不支持 css 嵌套语法，其显示逻辑由 js 驱动，::backdrop 必须顶层独立书写且 safari 不支持，居中与样式需显式重置，嵌套反而掩盖兼容性问题。
dialog 元素不支持 CSS 嵌套语法
原生 <dialog></dialog> 标签本身不参与 CSS 嵌套（即不支持 @layer、& 等现代嵌套规则），它只是一个普通 HTML 元素，但它的渲染行为受浏览器 UA 样式和顶层层叠上下文约束——这意味着你写的嵌套 CSS 选择器（如 .modal { & dialog { ... } }）能解析，但很可能被忽略或失效。
真正的问题不在“能否嵌套写”，而在于：<dialog></dialog> 的显示逻辑由 JS 方法驱动（showModal()），其定位、z-index、焦点管理等不由常规 CSS 层级控制；CSS 嵌套无法绕过这些底层限制。
::backdrop 伪元素在嵌套中不可用
::backdrop 是唯一能样式化遮罩层的入口，但它有硬性限制：
- 不能出现在 CSS 嵌套块内（例如
.dialog-wrapper { &::backdrop { background: rgba(0,0,0,.5); } }无效） - 必须作为顶层独立规则书写：
dialog::backdrop { background: rgba(0,0,0,.5); } - Safari 目前（v17+）仍不支持
::backdrop，嵌套写法更不会触发降级逻辑 - 该伪元素只接受有限属性：仅
background、opacity、animation等，不支持transform、border、filter
居中与尺寸控制必须脱离嵌套重置
<dialog></dialog> 默认样式在各浏览器差异极大（Chrome 加 margin: 16px，Safari 可能偏移，Firefox 无圆角），嵌套写法容易被 UA 样式覆盖。必须显式重置：
- 去掉默认 margin：
dialog { margin: 0; }（不能写成.ui-dialog { & { margin: 0; } }） - 强制居中推荐用 Flex 容器包裹，而非依赖
top: 50%; left: 50%（后者在父元素有transform时会失效） - 宽度需设固定值或
max-width：dialog { width: min(90vw, 480px); }，margin: 0 auto单独无效 - 圆角、阴影、边框必须显式声明：
border-radius: 8px; border: 1px solid #ddd; box-shadow: 0 4px 12px rgba(0,0,0,.15);
嵌套 CSS 会掩盖真正的兼容性问题
用 CSS 嵌套组织样式看似整洁，但会模糊关键事实：
-
<dialog></dialog>在 Safari 中点击 backdrop 不触发click事件（e.target常为body），嵌套写法无法修复这个 JS 行为 - 多层
showModal()调用必然失败，CSS 嵌套再深也解决不了浏览器“顶层唯一”的硬限制 - 焦点管理（
autofocus、Tab锁定）完全由 JS 控制，CSS 无权干预
真正需要关注的是：是否值得为 <dialog></dialog> 投入嵌套 CSS 工程？多数场景下，直接写扁平、高优先级的 dialog 和 dialog::backdrop 规则更可靠，也更容易做 Safari 降级处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
