CSS 嵌套 at-规则
任何其主体包含样式规则的 at-规则 都可以使用 CSS 嵌套在一个样式规则中。嵌套在 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 (width >= 1024px) {
max-inline-size: 1024px;
}
}
}
非嵌套等效
css
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
@media (orientation: landscape) and (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%;
}
}