本文深入探讨了css预处理器（如scss/sass）中 `&` 符号和嵌套选择器的用法，以及它们与原生css在语法上的根本区别。我们将详细解释为何在原生css中不能直接使用 `&` 和嵌套，并提供正确的原生css写法，帮助开发者避免常见错误，高效地利用伪元素和伪类。
在前端开发中，CSS预处理器（如Sass/SCSS、Less、Stylus）极大地提升了CSS的编写效率和可维护性。其中，& 符号和选择器嵌套是预处理器最受欢迎的特性之一。然而，对于初学者或不熟悉预处理器编译过程的开发者来说，将这些特性直接应用到原生CSS中常常会导致样式不生效的问题。理解这两者之间的根本差异是编写健壮CSS代码的关键。
& 符号与嵌套选择器：预处理器特性解析
CSS预处理器通过引入变量、混入（mixins）、函数以及最常见的嵌套规则和 & 符号，扩展了CSS的功能。
-
& 符号（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）的样式定义更加直观和集中。
-
嵌套选择器（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）必须直接附加到完整的选择器上。它们不能独立存在，也不能通过 & 符号来引用父级。
-
伪元素 (::before, ::after) 用于在元素内容的前面或后面插入生成的内容。
.selectorName::before { content: " "; display: table; } .selectorName::after { content: " "; display: table; clear: both; } -
伪类 (:hover, :focus, :active 等) 用于选择处于特定状态的元素。
.selectorName:hover { background-color: lightblue; } .selectorName:focus { outline: 2px solid blue; }
如何将预处理器风格转换为原生CSS
要将包含 & 符号和嵌套选择器的预处理器代码转换为原生CSS，需要遵循以下规则：
-
移除 & 符号： 所有使用 & 符号的地方，都必须替换为它所代表的完整父选择器。
- &:hover 变为 .parentSelector:hover
- &::after 变为 .parentSelector::after
-
扁平化嵌套选择器： 将所有嵌套的选择器展开，形成独立的、完整的选择器链。
.selector1 { .selector2 { /* ... */ } }应转换为：
.selector1 { /* ... */ } .selector1 .selector2 { /* ... */ }
实践案例：计算器按钮样式
假设我们有一个计算器按钮，并希望在悬停和聚焦时应用特殊样式，包括一个在聚焦时出现的动画效果。
HTML 结构示例：
原始（错误的）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代码。
