第十一章 · 11.1 节

CSS 原生嵌套

过去要写出"父子结构"的样式，只能靠预处理器（Sass/Less）在编译阶段展开。如今浏览器原生支持了嵌套语法，不需要任何构建工具，直接在 .css 文件里就能按 DOM 层级组织规则，减少重复的父选择器书写。

基本嵌套语法

在一个选择器的花括号内部，可以直接写另一条以其为父级的规则：

.card {
  padding: 16px;
  border: 1px solid #ddd;

  .title {
    font-size: 18px;
    font-weight: 600;
  }

  p {
    color: #555;
  }
}
/* 等价于： */
.card { padding: 16px; border: 1px solid #ddd; }
.card .title { font-size: 18px; font-weight: 600; }
.card p { color: #555; }

子规则会自动被展开为"父选择器 + 后代选择器"，无需重复书写 .card。这与 Sass 的嵌套写法几乎一致，区别在于它是浏览器原生解析的，不需要任何构建步骤。

& 符号与复合选择器

当子规则不是"后代"关系，而是需要拼接在父选择器后面（比如伪类、修饰类）时，必须显式使用 & 代表父选择器本身：

.button {
  background: teal;

  &:hover {
    background: darkcyan;
  }

  &.is-disabled {
    opacity: .5;
    pointer-events: none;
  }

  & + & {
    margin-left: 8px; /* 相邻两个 .button 之间的间距 */
  }
}

嵌套 @media 与 @supports

条件规则组（@media、@supports、@container）也可以直接嵌套在选择器内部，避免把同一个组件的样式拆散在文件的不同位置：

.sidebar {
  width: 280px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

常见坑点