CSS at 规则嵌套
使用 CSS 嵌套可以将任何包含样式规则的 at 规则嵌入到另一个规则中。嵌套在 at 规则中的规则从距离它们最近的祖先规则中获得选择器定义。属性可以直接被包含到一个嵌套的 at 规则中，就像被一个 & {...} 块所包含的那样。
可以被嵌套的 at 规则
示例
嵌套 @media at 规则
在这个示例中，我们有三个 CSS 块。第一个块展示一般的 at 规则嵌套。第二个是浏览器解析嵌套块的一个中间过程的展示。第三个块是不使用嵌套的等价表述。
嵌套 CSS
css
.foo { display: grid; @media (orientation: landscape) { grid-auto-flow: column; } } 扩展的嵌套 CSS
css
.foo { display: grid; @media (orientation: landscape) { & { grid-auto-flow: column; } } } 非嵌套等价表示
css
.foo { display: grid; } @media (orientation: landscape) { .foo { grid-auto-flow: column; } } 多重 @media at 规则嵌套
At 规则也可以被其他 at 规则所嵌套。下面就是一个示例，以及如何不使用嵌套进行重写。
嵌套 at 规则
css
.foo { display: grid; @media (orientation: landscape) { grid-auto-flow: column; @media (min-width: 1024px) { max-inline-size: 1024px; } } } 非嵌套等价表示
css
.foo { display: grid; } @media (orientation: landscape) { .foo { grid-auto-flow: column; } } @media (orientation: landscape) and (min-width: 1024px) { .foo { max-inline-size: 1024px; } } 嵌套级联层（@layer）
级联层也可以被嵌套以创建子层。嵌套层之间使用 .（点号）连接。
定义父层和子层
我们通过定义具名级联层开始，在使用它们以前，不定义任何样式。
css
@layer base { @layer support; } 使用嵌套向层中添加规则
.foo 选择器将其规则添加到 base @layer。嵌套的 support @layer 创建 base.support 内部层，紧接着 & 嵌套选择器为 .foo .bar 选择器创建规则。
css
.foo { @layer base { block-size: 100%; @layer support { & .bar { min-block-size: 100%; } } } } 非嵌套等价表示
css
@layer base { .foo { block-size: 100%; } } @layer base.support { .foo .bar { min-block-size: 100%; } }