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%;
}
}