此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
& 嵌套选择器
Baseline 2023Newly 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() 伪类内的情况一样。
备注：子规则不等于子元素选择器。子规则可以根据& 嵌套选择器的使用与否来选择父元素或子元素。
如果不在一个嵌套规则里使用，则& 嵌套选择器将代表其根作用域。
语法
parentRule { /* 父规则样式属性 */ & childRule { /* 子规则样式属性 */ }}& 嵌套选择器与空格
考虑以下不使用& 嵌套选择器的嵌套代码。
.parent-rule { /* 父规则的属性 */ .child-rule { /* 子规则的属性 */ }}当浏览器解析嵌套选择器时，它将自动在选择器之间添加空格以创建新 CSS 选择器规则。以下代码显示不使用嵌套的等价规则：
.parent-rule { /* 父规则的属性 */}.parent-rule .child-rule { /* 样式属性：是 .parent-rule 的子元素且具有 .child-rule 的元素 */}当嵌套规则需要被附加（无空格）到父规则上时，例如当使用伪类，或者创建组合选择器时，& 嵌套选择器必须紧贴在子选择器之前。
考虑以下示例。我们想要为一个元素添加样式，一些是需要永久应用的，而另一些嵌套样式则仅当鼠标悬停时才被应用。如果不添加& 嵌套选择器，浏览器会添加空格，最终我们得到的将是一个匹配任意被悬停的子元素的选择器。当然，这才不是我们想要的结果。
.parent-rule { /* 父规则的属性 */ :hover { /* 子规则的属性 */ }}/* 浏览器会将以上嵌套规则解析为 */.parent-rule { /* 父规则的属性 */}.parent-rule *:hover { /* 子规则的属性 */}在添加& 嵌套选择器（不添加空格）后，由父规则匹配的元素在被悬停时就会应用样式了。
.parent-rule { /* 父规则的属性 */ &:hover { /* 子规则的属性 */ }}/* 浏览器会将以上嵌套规则解析为 */.parent-rule { /* 父规则的属性 */}.parent-rule:hover { /* 子规则的属性 */}后附& 嵌套选择器
& 嵌套选择器也可以添加到一个选择器的后方，来反转上下文。
.card { /* .card 的样式 */ .featured & { /* .featured .card 的样式 */ }}/* 浏览器会将以上嵌套规则解析为 */.card { /* .card 的样式 */}.featured .card { /* .featured .card 的样式 */}& 嵌套选择器可以在一个选择器里多次使用：
.card { /* .card 的样式 */ .featured & & & { /* .featured .card .card .card 的样式 */ }}/* 浏览器会将以上嵌套规则解析为 */.card { /* .card 的样式 */}.featured .card .card .card { /* .featured .card .card .card 的样式 */}示例
这两个示例的输出相同。第一个使用常规 CSS 样式，第二个使用& 嵌套选择器。
使用常规 CSS 样式
使用常规 CSS 样式的示例。
HTML
<p>这段文字<a href="#">包含一个链接</a>，尝试悬停或聚焦它。</p>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
<p>这段文字<a href="#">包含一个链接</a>，尝试悬停或聚焦它。</p>CSS
.example { font-family: system-ui; font-size: 1.2rem; & > a { color: tomato; &:hover, &:focus { color: ivory; background-color: tomato; } }}结果
在嵌套规则外使用&
如果不在一个嵌套规则里使用，则& 嵌套选择器将代表其根作用域。
<p>在结果框上方悬停以更改文档的背景颜色。</p>& { color: blue; font-weight: bold;}&:hover { background-color: wheat;}结果
在这个示例中，所有样式均被应用到document 上。
规范
| Specification |
|---|
| CSS Nesting Module Level 1 # nest-selector |