CSS选择器嵌套：原生CSS的局限与预处理器的解决方案

在CSS开发过程中，选择器嵌套是一个能够提升代码可读性和维护性的重要特性。原生CSS长期缺乏原生的嵌套支持，开发者往往需要通过预处理器来实现这一需求。本文将详细介绍原生CSS的局限、预处理器提供的解决方案，以及原生CSS嵌套特性的最新发展。

一、原生CSS的嵌套局限

在很长一段时间里，原生CSS不支持选择器的直接嵌套，这意味着当我们需要为嵌套的HTML结构编写样式时，只能采用重复书写父选择器的写法。例如，针对如下HTML结构：

<div class="container">
  <div class="header">
    <h1 class="title">页面标题</h1>
    <p class="desc">页面描述信息</p>
  </div>
  <div class="content">
    <p class="text">正文内容</p>
  </div>
</div>

如果使用原生CSS编写样式，需要重复书写父选择器才能实现层级匹配：

.container {
  padding: 20px;
}
.container .header {
  background-color: #f5f5f5;
  padding: 15px;
}
.container .header .title {
  font-size: 24px;
  color: #333;
}
.container .header .desc {
  font-size: 14px;
  color: #666;
}
.container .content {
  margin-top: 20px;
}
.container .content .text {
  line-height: 1.6;
}

这种写法存在明显的缺点：首先，当父选择器名称发生变更时，所有关联的层级选择器都需要同步修改，极易出现遗漏；其次，重复书写父选择器会让代码变得冗余，降低可读性，尤其是在嵌套层级较深的结构中，代码的维护成本会显著上升。

二、CSS预处理器的嵌套解决方案

为了弥补原生CSS的嵌套缺陷，Sass、Less等CSS预处理器很早便提供了原生的嵌套语法支持，让开发者可以按照HTML的嵌套结构编写CSS代码，大大提升了开发效率。

2.1 Sass的嵌套语法

Sass是最早支持选择器嵌套的预处理器之一，其嵌套语法允许将子选择器直接写在父选择器的代码块内部，预处理器会自动将其转换为标准的CSS层级选择器。针对上面的HTML结构，使用Sass编写的样式如下：

.container {
  padding: 20px;

  .header {
    background-color: #f5f5f5;
    padding: 15px;

    .title {
      font-size: 24px;
      color: #333;
    }

    .desc {
      font-size: 14px;
      color: #666;
    }
  }

  .content {
    margin-top: 20px;

    .text {
      line-height: 1.6;
    }
  }
}

Sass还支持使用&符号引用父选择器，这在编写伪类、伪元素或者组合选择器时非常实用。例如，为.container添加hover状态和特定修饰类：

.container {
  padding: 20px;

  &:hover {
    background-color: #fafafa;
  }

  &.active {
    border: 1px solid #007bff;
  }
}

上述Sass代码会被编译为如下标准CSS：

.container {
  padding: 20px;
}
.container:hover {
  background-color: #fafafa;
}
.container.active {
  border: 1px solid #007bff;
}

2.2 Less的嵌套语法

Less的嵌套语法与Sass类似，同样支持选择器嵌套和&父选择器引用，使用方式如下：

.container {
  padding: 20px;

  .header {
    background-color: #f5f5f5;
    padding: 15px;

    .title {
      font-size: 24px;
      color: #333;
    }
  }

  &:hover {
    background-color: #fafafa;
  }
}

预处理器不仅解决了嵌套问题，还提供了变量、混合宏、函数等更多高级特性，进一步提升了CSS的开发体验，因此在很长一段时间内，预处理器都是前端开发的标准配置。

三、原生CSS嵌套特性的发展

随着CSS标准的不断演进，原生CSS终于在CSS Nesting Module规范中引入了原生的嵌套支持，目前主流现代浏览器（Chrome 112+、Firefox 117+、Safari 16.5+）已经实现了对该特性的支持，开发者可以逐步在项目中尝试使用。

3.1 原生CSS嵌套的基本语法

原生CSS的嵌套语法与预处理器类似，但有一些细微的差异。原生嵌套需要将嵌套的选择器放在&或者:is()伪类中，或者使用更简洁的直接嵌套写法（部分浏览器已支持）。以下是原生CSS嵌套的示例：

.container {
  padding: 20px;

  & .header {
    background-color: #f5f5f5;
    padding: 15px;

    & .title {
      font-size: 24px;
      color: #333;
    }
  }

  /* 使用:is()的写法 */
  :is(&) .content {
    margin-top: 20px;
  }
}

需要注意的是，原生CSS嵌套要求嵌套的选择器必须是有效的CSS选择器，且&符号必须作为选择器的开头或者紧跟组合符（如空格、>、+等）使用，这一点和预处理器中可以更灵活使用&有所不同。

3.2 原生嵌套与预处理器嵌套的差异

下表对比了原生CSS嵌套和预处理器嵌套的主要差异：

四、实践建议

针对不同的项目场景，可以参考以下实践建议：

• 如果项目需要兼容旧版浏览器（如IE系列），建议继续使用预处理器方案，避免兼容性问题。

• 如果是面向现代浏览器的全新项目，可以尝试使用原生CSS嵌套，减少构建流程的复杂度。

• 如果项目已经使用了预处理器，且依赖预处理器的变量、混合等特性，无需为了嵌套特性切换到原生CSS，预处理器仍然更合适。

• 在使用原生CSS嵌套时，注意测试目标浏览器的兼容性，必要时可以通过https://www.ipipp.com查询特性支持情况。

无论是预处理器嵌套还是原生CSS嵌套，核心目标都是让CSS代码更符合开发者的编写习惯，提升代码的可维护性。随着原生CSS特性的不断完善，未来原生嵌套的使用场景会越来越广泛，但预处理器依然会在需要高级特性的场景中发挥价值。

CSS选择器嵌套 CSS预处理器 Sass嵌套 LESS嵌套 原生CSS嵌套