嵌套选择器 &

基线 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 */
}

示例

以下两个示例都产生相同的输出。第一个使用普通 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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅