& 嵌套选择器

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Nesting selector (&)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

参见