1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 布局
  4. CSS 嵌套
  5. 使用 CSS 嵌套

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

使用 CSS 嵌套

CSS 嵌套模块允许你将你的样式表写的更加容易阅读、更加模块化，而且更加容易维护。因为你不再需要重复选择器，文件同样也可以被压缩。

CSS 嵌套不同于如 Sass 等的 CSS 预处理器的一点是，它是被浏览器直接解析的，而不是先经由 CSS 预处理器的预编译。而且在 CSS 嵌套中，& 嵌套选择器的优先级类似于 :is() 函数；它的优先级由它所关联的选择器列表当中优先级最高的选择器决定。

这个指南展示各种嵌套 CSS 的方法。

子选择器

你可以使用 CSS 嵌套来创建一个父级的子选择器，这可以用来选择特定父元素的子元素。可以选择使用& 嵌套选择器来实现。

有几个特定环境可以使得 & 嵌套选择器变得很必要或者有用：

  • 在连接选择器时，如组合选择器或伪类。
  • 为了向后兼容。
  • 作为一个辅助阅读的标志。当你看到 & 时，你就知道这里用到 CSS 嵌套了。
css
/* 不使用嵌套选择器 */
parent {
  /* 父样式 */
  child {
    /* 父级的子样式 */
  }
}

/* 使用嵌套选择器 */
parent {
  /* 父样式 */
  & child {
    /* 父级的子样式 */
  }
}

/* 浏览器均会把以上两个样式表解析为 */
parent {
  /* 父样式 */
}
parent child {
  /* 父级的子样式 */
}

示例

在这个示例中，一个没有使用 & 嵌套选择器，另一个使用了。在 <label> 内部的 <input> 被赋予了和紧邻 <label> 的 <input> 不同的样式。这个示例展示了省略 & 嵌套选择器的影响。

备注：这个示例演示了实现原版和现行嵌套规范的浏览器的不同输出。Chrome 和 Safari 实现了 2023 年 8 月前的原版规范，其要求使用 & 嵌套选择器。如果你的浏览器支持现行规范，那么这两个示例的输出将会和第二个示例一致。

不使用嵌套选择器

HTML
html
<form>
  <label for="name">姓名：
    <input type="text" id="name" />
  </label>
  <label for="email">邮箱：</label>
  <input type="text" id="email" />
</form>
CSS
css
form,
label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
css
input {
  /* 不在 label 内的 input 的样式 */
  border: tomato 2px solid;
}
label {
  /* label 的样式 */
  font-family: system-ui;
  font-size: 1.25rem;
  input {
    /* 在 label 内的 input 的样式 */
    border: blue 2px dashed;
  }
}
结果

使用嵌套选择器

HTML
html
<form>
  <label for="name">姓名：
    <input type="text" id="name" />
  </label>
  <label for="email">邮箱：</label>
  <input type="text" id="email" />
</form>
CSS
css
form,
label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
css
input {
  /* 不在 label 内的 input 的样式 */
  border: tomato 2px solid;
}
label {
  /* label 的样式 */
  font-family: system-ui;
  font-size: 1.25rem;
  & input {
    /* 在 label 内的 input 的样式 */
    border: blue 2px dashed;
  }
}
结果

关系选择器

CSS 关系选择器也可以在使用或不使用 & 嵌套选择器的情况下使用。

示例

嵌套邻接兄弟选择器

在这个示例中，我们使用 CSS 嵌套，将每个 <h2> 后的第一个段落使用邻接兄弟选择器（+）选中。

HTML
html
<h2>标题</h2>
<p>这是第一段。</p>
<p>这是第二段。</p>
CSS
css
h2 {
  color: tomato;
  + p {
    color: white;
    background-color: black;
  }
}
/* 这段也可以用嵌套选择器改写为 */
/* 
h2 {
  color: tomato;
  & + p {
    color: white;
    background-color: black;
  }
}
*/
结果

组合选择器

在嵌套 CSS 中使用组合选择器时，你必须使用 & 嵌套选择器，因为浏览器会自动在不使用 & 嵌套选择器的选择器之间添加空格。

为了选择一个带有 class="a b" 的元素，你必须使用 & 嵌套选择器，否则空格将会拆散这个组合选择器。

css
.a {
  /* 带有 class="a" 元素的样式 */
  .b {
    /* 带有 class="b"，且为 class="a" 元素的子元素的样式 */
  }
  &.b {
    /* 带有 class="a b" 元素的样式 */
  }
}

/* 浏览器会将其分析为 */
.a {
  /* 带有 class="a" 元素的样式 */
}
.a .b {
  /* 带有 class="b"，且为 class="a" 元素的子元素的样式 */
}
.a.b {
  /* 带有 class="a b" 元素的样式 */
}

示例

嵌套和组合选择器

在这个示例中，我们使用 & 嵌套选择器来创建组合选择器，为带有多个类的元素添加样式。

HTML
html
<div class="notices">
  <div class="notice">
    <h2 class="notice-heading">注意</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="notice warning">
    <h2 class="warning-heading">警告</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="notice success">
    <h2 class="success-heading">成功</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
</div>
CSS

使用弹性盒子布局将 .notices 变为一个列。

css
.notices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 90%;
  margin: auto;
}

在下列 CSS 中，我们使用嵌套创建带 & 和不带 & 的组合选择器。顶层选择器为带有 class="notice" 的元素定义基本样式。接下来，我们使用 & 嵌套选择器分别为带有 class="notice warning" 和 class="notice success" 的元素创建组合选择器。另外，不显式使用 & 创建组合选择器的例子可以参考 .notice .notice-heading::before。

css
.notice {
  width: 90%;
  justify-content: center;
  border-radius: 1rem;
  border: black solid 2px;
  background-color: #ffc107;
  color: black;
  padding: 1rem;
  .notice-heading::before {
    /* 等同于 `.notice .notice-heading::before` */
    content: "ℹ︎ ";
  }
  &.warning {
    /* 等同于 `.notice.warning` */
    background-color: #d81b60;
    border-color: #d81b60;
    color: white;
    .warning-heading::before {
      /* 等同于 `.notice.warning .warning-heading::before` */
      content: "! ";
    }
  }
  &.success {
    /* 等同于 `.notice.success` */
    background-color: #004d40;
    border-color: #004d40;
    color: white;
    .success-heading::before {
      /* 等同于 `.notice.success .success-heading::before` */
      content: "✓ ";
    }
  }
}
结果

后附嵌套选择器

& 嵌套选择器也可以添加到一个选择器的后方。这将起到反转上下文的效果。

例如，我们有一个子元素，当父元素被设定不同的类时想让它变化，则这个选择器就会很有用：

html
<div>
  <span class="foo">文本</span>
</div>

相对于：

html
<div class="bar">
  <span class="foo">文本</span>
</div>
css
.foo {
  /* .foo 的样式 */
  .bar & {
    /* .bar .foo 的样式 */
  }
}

示例

后附嵌套选择器

这个示例里有三个卡片，其中一个被强调了（featured）。所有的卡片，除了被强调的卡片的标题会有一个不同的颜色以外，都是一样的。通过将 & 嵌套选择器附加在 .featured 后方，我们可以将 .featured h2 的样式写在 h2 里。

HTML
html
<div class="wrapper">
  <article class="card">
    <h2>卡片 1</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card featured">
    <h2>卡片 2</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card">
    <h2>卡片 3</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
</div>
CSS
css
.wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  font-family: system-ui;
}

在下列 CSS 中，我们为 .card 和 .card h2 创建样式。然后，在 h2 的样式里，我们用 & 嵌套选择器将 .featured 类嵌套在其前方，这将创建一个等同于 .card :is(.featured h2) 的选择器，也就是 :is(.card h2):is(.featured h2)。

css
.card {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /* 等同于 `.card h2` */
    color: slateblue;
    .featured & {
      /* 等同于 `:is(.card h2):is(.featured h2)` */
      color: tomato;
    }
  }
}
结果

拼接（是不可能的）

在如 Sass 等的 CSS 预处理器当中，我们可以使用嵌套来拼接字符串以创建新类。这在如 BEM 等 CSS 命名方法中尤为常见。

css
.component {
  &__child-element {
  }
}
/* 在 Sass 中，这将变为 */
.component__child-element {
}

警告：这在 CSS 嵌套中是不可能的：当不使用组合器时，嵌套选择器将被当作类型选择器。允许拼接会使得这个规则无效。

在组合选择器中，类型选择器必须是第一位。&Element（一个类型选择器）会使得这个选择器和整个样式块无效。因为类型选择器必须是第一位，所以这个组合选择器必须写成 Element&。

css
.my-class {
  element& {
  }
}

/* 浏览器将其解析为组合选择器 */
.my-class {
}
element.my-class {
}

无效的嵌套样式规则

如果一个嵌套 CSS 规则无效，那么所有其包含的样式都将被忽略。这不影响其父级及其后面的规则。

在这个示例中，有一个无效选择器（% 字符在选择器中是无效的）。这个选择器下的规则都将被忽略，但是后续有效的规则并不会。

css
.parent {
  /* .parent 的样式，一切完好无损 */
  & %invalid {
    /* %invalid 的无效样式，全部被忽略 */
  }
  & .valid {
    /* .parent .valid 的样式，一切完好无损 */
  }
}

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

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