& 嵌套选择器

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS & 嵌套选择器明确指示在使用 CSS 嵌套时，父规则和子规则的关系。它使得内嵌子规则的选择器相对于其父元素。若没有 & 嵌套选择器，则子规则将选择子元素。子选择器的优先级和它们被包含在 :is() 伪类内的情况一样。

备注： 子规则不等于子元素选择器。子规则可以根据 & 嵌套选择器的使用与否来选择父元素或子元素。

如果不在一个嵌套规则里使用，则 & 嵌套选择器将代表其根作用域。

语法

css
parentRule {
  /* 父规则样式属性 */
  & childRule {
    /* 子规则样式属性 */
  }
}

& 嵌套选择器与空格

考虑以下不使用 & 嵌套选择器的嵌套代码。

css
.parent-rule {
  /* 父规则的属性 */
  .child-rule {
    /* 子规则的属性 */
  }
}

当浏览器解析嵌套选择器时，它将自动在选择器之间添加空格以创建新 CSS 选择器规则。以下代码显示不使用嵌套的等价规则：

css
.parent-rule {
  /* 父规则的属性 */
}

.parent-rule .child-rule {
  /* 样式属性：是 .parent-rule 的子元素且具有 .child-rule 的元素 */
}

当嵌套规则需要被附加（无空格）到父规则上时，例如当使用伪类，或者创建组合选择器时，& 嵌套选择器必须紧贴在子选择器之前。

考虑以下示例。我们想要为一个元素添加样式，一些是需要永久应用的，而另一些嵌套样式则仅当鼠标悬停时才被应用。如果不添加 & 嵌套选择器，浏览器会添加空格，最终我们得到的将是一个匹配任意被悬停的子元素的选择器。当然，这才不是我们想要的结果。

css
.parent-rule {
  /* 父规则的属性 */
  :hover {
    /* 子规则的属性 */
  }
}

/* 浏览器会将以上嵌套规则解析为 */
.parent-rule {
  /* 父规则的属性 */
}

.parent-rule *:hover {
  /* 子规则的属性 */
}

在添加 & 嵌套选择器（不添加空格）后，由父规则匹配的元素在被悬停时就会应用样式了。

css
.parent-rule {
  /* 父规则的属性 */
  &:hover {
    /* 子规则的属性 */
  }
}

/* 浏览器会将以上嵌套规则解析为 */
.parent-rule {
  /* 父规则的属性 */
}

.parent-rule:hover {
  /* 子规则的属性 */
}

后附 & 嵌套选择器

& 嵌套选择器也可以添加到一个选择器的后方，来反转上下文。

css
.card {
  /* .card 的样式 */
  .featured & {
    /* .featured .card 的样式 */
  }
}

/* 浏览器会将以上嵌套规则解析为 */

.card {
  /* .card 的样式 */
}

.featured .card {
  /* .featured .card 的样式 */
}

& 嵌套选择器可以在一个选择器里多次使用：

css
.card {
  /* .card 的样式 */
  .featured & & & {
    /* .featured .card .card .card 的样式 */
  }
}

/* 浏览器会将以上嵌套规则解析为 */

.card {
  /* .card 的样式 */
}

.featured .card .card .card {
  /* .featured .card .card .card 的样式 */
}

示例

这两个示例的输出相同。第一个使用常规 CSS 样式，第二个使用 & 嵌套选择器。

使用常规 CSS 样式

使用常规 CSS 样式的示例。

HTML

html
<p class="example">这段文字<a href="#">包含一个链接</a>，尝试悬停或聚焦它。</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">这段文字<a href="#">包含一个链接</a>，尝试悬停或聚焦它。</p>

CSS

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

结果

在嵌套规则外使用 &

如果不在一个嵌套规则里使用，则 & 嵌套选择器将代表其根作用域。

html
<p>在结果框上方悬停以更改文档的背景颜色。</p>
css
& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

结果

在这个示例中，所有样式均被应用到 document 上。

规范

Specification
CSS Nesting Module
# nest-selector

浏览器兼容性

BCD tables only load in the browser

参见