CSS 嵌套规则

任何其主体包含样式规则的 at 规则 都可以使用 CSS 嵌套在另一个样式规则内。嵌套在 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%;
  }
}

另请参阅