此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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%;
}
}