& 嵌套选择器

Baseline 2023

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

CSS & 嵌套选择器 在使用 CSS 嵌套时，明确地说明了父规则和子规则之间的关系。它使得嵌套的子规则选择器相对于父元素。如果没有 & 嵌套选择器，子规则选择器会选择子元素。子规则选择器的特异性权重与它们在 :is() 中时的权重相同。

注意： 子规则 不意味着 子元素选择器。子规则可以根据是否使用 & 嵌套选择器来针对父元素或子元素。

如果不在嵌套样式规则中使用，& 嵌套选择器代表作用域根。

语法

css

parentRule {
  /* parent rule style properties */
  & childRule {
    /* child rule style properties */
  }
}

`&` 嵌套选择器和空格

考虑以下在没有 & 嵌套选择器的情况下进行嵌套的代码。

css

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

当浏览器解析嵌套选择器时，它会自动在选择器之间添加空格，以创建新的 CSS 选择器规则。以下代码显示了等效的非嵌套规则

css

.parent-rule {
  /* parent rule style properties */
}

.parent-rule .child-rule {
  /* style properties for .child-rule descendants for .parent-rule ancestors */
}

当嵌套规则需要（没有空格）附加到父规则时，例如使用 伪类 或创建复合选择器时，必须立即在前面加上 & 嵌套选择器才能达到预期效果。

考虑一个示例，我们想要样式化一个元素，提供始终应用的样式，并且还嵌套一些仅在悬停时应用的样式。如果未包含 & 嵌套选择器，则会添加空格，最终得到一个规则集，该规则集将嵌套样式应用于父规则选择器的任何悬停后代。然而，这并不是我们想要的。

css

.parent-rule {
  /* parent rule properties */
  :hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule *:hover {
  /* child rule properties */
}

在没有空格的情况下添加 & 嵌套选择器后，父规则匹配的元素在悬停时将被样式化。

css

.parent-rule {
  /* parent rule properties */
  &:hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule:hover {
  /* child rule properties */
}

附加 `&` 嵌套选择器

& 嵌套选择器也可以附加到后面，以反转规则的上下文。

css

.card {
  /* .card styles */
  .featured & {
    /* .featured .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card {
  /* .featured .card styles */
}

& 嵌套选择器可以放置多次

css

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

不能表示伪元素

& 选择器等同于 :is() 选择器，并且具有相同的限制，即它不能表示伪元素。

例如，对于以下样式规则，即使嵌套在 <div class="important"> 中，也不会将任何生成的文本样式化为红色，因为 .important :is(.foo::before) 无法匹配任何内容。

css

.foo::before {
  content: "Hello";

  .important & {
    color: red;
  }
}

此限制也适用于嵌套 @ 规则，其属性隐式地包裹在 & 选择器中。例如，对于以下规则，即使在小屏幕上，也不会将任何生成的文本样式化为红色，因为 color: red 属性隐式地包裹在 & 选择器中，在本例中为 :is(.foo::before)。

css

.foo::before {
  content: "Hello";

  @media (width < 600px) {
    color: red;
  }
}

示例

以下两个示例产生相同的输出。第一个使用普通的 CSS 样式，第二个使用 & 嵌套选择器。

使用普通 CSS 样式

此示例使用普通 CSS 样式。

HTML

html

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

css

.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

结果

在嵌套 CSS 样式中使用 `&`

此示例使用嵌套 CSS 样式。

HTML

html

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

css

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

结果

在嵌套规则之外使用 `&`

如果不在嵌套样式规则中使用，& 嵌套选择器代表作用域根。

html

<p>Hover over the output box to change document's background color.</p>

css

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

结果

在这种情况下，所有样式都适用于文档。

规范

规范
CSS 嵌套模块 # nest-selector

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 27 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题