本文深入探讨了css预处理器（如scss/sass）中 `&` 符号和嵌套选择器的用法，以及它们与原生css在语法上的根本区别。我们将详细解释为何在原生css中不能直接使用 `&` 和嵌套，并提供正确的原生css写法，帮助开发者避免常见错误，高效地利用伪元素和伪类。

在前端开发中，CSS预处理器（如Sass/scss、less、stylus）极大地提升了CSS的编写效率和可维护性。其中，& 符号和选择器嵌套是预处理器最受欢迎的特性之一。然而，对于初学者或不熟悉预处理器编译过程的开发者来说，将这些特性直接应用到原生CSS中常常会导致样式不生效的问题。理解这两者之间的根本差异是编写健壮CSS代码的关键。

& 符号与嵌套选择器：预处理器特性解析

CSS预处理器通过引入变量、混入（mixins）、函数以及最常见的嵌套规则和 & 符号，扩展了CSS的功能。

1. & 符号（Parent Selector） 在SCSS/Sass等预处理器中，& 符号代表当前父选择器。它允许开发者在嵌套规则中引用父选择器，从而创建更复杂但更简洁的选择器组合，例如：

   .calculatorButton {   // ... 按钮基本样式   &:hover { // 等同于 .calculatorButton:hover     background: #201e40;   }   &:focus { // 等同于 .calculatorButton:focus     outline: 0;     &::after { // 等同于 .calculatorButton:focus::after       content: attr(data-num);       // ... 其他样式     }   } }

   这种语法使得与父选择器相关的伪类（如:hover, :focus）或伪元素（如::before, ::after）的样式定义更加直观和集中。

2. 嵌套选择器（Nesting Selectors） 预处理器允许将一个选择器嵌套在另一个选择器内部，这在视觉上模拟了html的结构，提高了代码的可读性。例如：

   .parent-element {   color: blue;   .child-element { // 等同于 .parent-element .child-element     font-size: 16px;   } }

   这种嵌套结构在编译时会被扁平化为标准的css选择器。

   立即学习“前端免费学习笔记（深入）”；

核心区别： 原生CSS（css3及以前版本，以及大多数现代浏览器对CSS Nesting Module支持之前）不直接支持 & 符号和选择器嵌套。如果你在纯CSS文件中使用这些语法，浏览器将无法解析它们，导致样式失效。

原生CSS中伪元素与伪类的正确使用

在原生CSS中，伪元素（如::before, ::after）和伪类（如:hover, :focus）必须直接附加到完整的选择器上。它们不能独立存在，也不能通过 & 符号来引用父级。

1. 伪元素 (::before, ::after) 用于在元素内容的前面或后面插入生成的内容。

   .selectorName::before {   content: " ";   display: table; }  .selectorName::after {   content: " ";   display: table;   clear: both; }

2. 伪类 (:hover, :focus, :active 等) 用于选择处于特定状态的元素。

   .selectorName:hover {   background-color: lightblue; }  .selectorName:focus {   outline: 2px solid blue; }

如何将预处理器风格转换为原生CSS

要将包含 & 符号和嵌套选择器的预处理器代码转换为原生CSS，需要遵循以下规则：

1. 移除 & 符号： 所有使用 & 符号的地方，都必须替换为它所代表的完整父选择器。

   • &:hover 变为 .parentSelector:hover
   • &::after 变为 .parentSelector::after

2. 扁平化嵌套选择器： 将所有嵌套的选择器展开，形成独立的、完整的选择器链。

   • .selector1 {   .selector2 { /* ... */ } }

     应转换为：

     .selector1 { /* ... */ } .selector1 .selector2 { /* ... */ }

实践案例：计算器按钮样式

假设我们有一个计算器按钮，并希望在悬停和聚焦时应用特殊样式，包括一个在聚焦时出现的动画效果。

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

57

查看详情

HTML 结构示例：

<button data-num="10" class="calculatorButton">10</button>

原始（错误的）SCSS-like 代码：

/* 错误的原生CSS用法，包含 & 和嵌套 */ &::before, &::after {   content: " ";   display: table; }  &::after {   clear: both; }  &:hover {   background: #201e40; }  &:focus {   outline: 0;    &::after { /* 嵌套的伪元素 */     content: " ";     display: table;     animation: zoom 1s;     animation-iteration-count: 1;     animation-fill-mode: both;      content: attr(data-num);     cursor: default;     font-size: 100px;     position: absolute;     top: 1.5em;     left: 50%;     text-align: center;     margin-left: -24px;     opacity: 0;     width: 48px;       } }

这段代码在纯CSS环境中将无法工作，因为 & 符号和嵌套的 &::after 语法不被支持。

正确的原生CSS 代码：

/* 正确的原生CSS写法 */  /* 针对 .calculatorButton 的 ::before 和 ::after 伪元素 */ .calculatorButton::before, .calculatorButton::after {   content: " ";   display: table; }  .calculatorButton::after {   clear: both; }  /* 针对 .calculatorButton 的 :hover 伪类 */ .calculatorButton:hover {   background: #201e40; }  /* 针对 .calculatorButton 的 :focus 伪类 */ .calculatorButton:focus {   outline: 0;  }  /* 针对 .calculatorButton 聚焦状态下的 ::after 伪元素 */ .calculatorButton:focus::after {   /* content: " ";  注意：如果需要显示 data-num，此处不应有 " " */   display: table; /* display: table 可能不适合绝对定位的文本内容 */   animation: zoom 1s;   animation-iteration-count: 1;   animation-fill-mode: both;    content: attr(data-num); /* 显示 data-num 属性值 */   cursor: default;   font-size: 100px;   position: absolute;   top: 1.5em;   left: 50%;   text-align: center;   margin-left: -24px;   opacity: 0; /* 初始透明度为0，动画后可能改变 */   width: 48px;     }  /* 假设的 @keyframes zoom 动画 */ @keyframes zoom {   0% {     transform: scale(0.5);     opacity: 0;   }   50% {     opacity: 1;   }   100% {     transform: scale(1);     opacity: 0; /* 动画结束后再次隐藏 */   } }

注意事项：

• 在 .calculatorButton:focus::after 中，content: ” ” 和 content: attr(data-num) 同时存在时，后者会覆盖前者。如果目的是显示 data-num 的值，则不应包含 content: ” “。
• display: table 对于一个绝对定位的文本内容可能不是最佳选择，通常 display: block 或 display: inline-block 更为常见。

何时选择CSS预处理器

虽然原生CSS足以完成大多数样式任务，但在以下场景中，CSS预处理器能带来显著优势：

• 大型项目： 预处理器提供了更好的组织结构、模块化和代码复用机制。
• 团队协作： 统一的变量、混入和函数可以确保样式的一致性。
• 复杂样式逻辑： 嵌套、& 符号、条件语句和循环等功能可以简化复杂样式的编写。
• 维护性： 集中管理颜色、字体等变量，修改时只需改动一处。

总结与注意事项

理解CSS预处理器和原生CSS之间的语法差异至关重要。& 符号和选择器嵌套是预处理器提供的便利功能，它们在编译后会被转换为标准的CSS语法。在编写原生CSS时，务必使用完整的选择器路径来定义样式，包括伪元素和伪类。

尽管现代CSS（通过CSS Nesting Module）正在逐步引入一些嵌套功能，但其语法和行为可能与SCSS/Sass略有不同，且浏览器兼容性仍在发展中。因此，在当前阶段，对于依赖广泛兼容性的项目，明确区分预处理器和原生CSS的语法仍然是最佳实践。正确应用这些知识，将帮助你编写出更有效、更易维护的CSS代码。

以上就是CSS & 符号与嵌套选择器：理解预