本文旨在澄清css预处理器（如scss/sass）特有的`&`操作符和嵌套选择器语法与标准css之间的区别。我们将详细解释如何在不同环境中正确使用这些高级特性，尤其是在处理伪元素（如`::before`和`::after`）时，并提供从scss/sass到纯css的转换示例，帮助开发者避免常见的语法错误。
理解CSS与CSS预处理器
在前端开发中，CSS是网页样式的基础。然而，随着项目复杂性的增加，纯CSS在代码组织、复用和维护方面可能会显得力不从心。为了解决这些问题，CSS预处理器（如SCSS/SASS、Less、Stylus）应运而生。它们引入了变量、混合宏、函数、嵌套规则以及父选择器引用（&）等高级功能，极大地提高了CSS的编写效率和可维护性。
然而，这些高级功能并非标准CSS的一部分。这意味着，如果您在项目中未使用CSS预处理器，直接在纯CSS文件中使用这些语法将导致解析错误，从而使样式无法生效。
&操作符：父选择器引用
&操作符是SCSS/SASS等预处理器提供的一个强大特性，它允许您在嵌套规则中引用父选择器。这在为同一元素定义不同状态（如:hover, :focus）或关联伪元素（如::before, ::after）时非常有用，可以使代码更加紧凑和易读。
在SCSS/SASS中的使用：
立即学习“前端免费学习笔记（深入）”；
.calculatorButton {
/* 基础样式 */
background: #f0f0f0;
&:hover {
background: #201e40; /* 悬停状态 */
}
&:focus {
outline: 0; /* 聚焦状态 */
&::after {
content: attr(data-num);
/* ... 其他样式 ... */
}
}
}在上述SCSS代码中，&:hover会编译为.calculatorButton:hover，而&:focus::after则会编译为.calculatorButton:focus::after。
在纯CSS中的替代方案：
在纯CSS中，您不能使用&操作符。您需要明确地写出完整的选择器路径。
.calculatorButton {
/* 基础样式 */
background: #f0f0f0;
}
.calculatorButton:hover {
background: #201e40; /* 悬停状态 */
}
.calculatorButton:focus {
outline: 0; /* 聚焦状态 */
}
.calculatorButton:focus::after {
content: attr(data-num);
/* ... 其他样式 ... */
}嵌套选择器
嵌套选择器是预处理器的另一个核心功能，它允许您将相关的CSS规则组织在一起，形成层级结构，从而提高代码的可读性和维护性。
在SCSS/SASS中的使用：
立即学习“前端免费学习笔记（深入）”；
.parent-element {
color: blue;
.child-element {
font-size: 16px;
}
&.active {
border: 1px solid green;
}
}这段SCSS代码会编译为：
.parent-element {
color: blue;
}
.parent-element .child-element {
font-size: 16px;
}
.parent-element.active {
border: 1px solid green;
}在纯CSS中的替代方案：
在纯CSS中，您必须为每个选择器单独定义规则，不能进行嵌套。
.parent-element {
color: blue;
}
.parent-element .child-element { /* 注意这里需要完整写出子选择器 */
font-size: 16px;
}
.parent-element.active { /* 注意这里需要完整写出父选择器及其修饰符 */
border: 1px solid green;
}伪元素（::before, ::after）与&的结合使用
问题中提到的&::before和&::after是典型的SCSS/SASS语法，用于为当前选择器添加伪元素。这些伪元素常用于创建装饰性内容、清除浮动（clearfix hack）等。
常见的清除浮动示例（SCSS）：
.clearfix {
&::before,
&::after {
content: " ";
display: table;
}
&::after {
clear: both;
}
}转换为纯CSS：
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}复杂示例：聚焦状态下伪元素的动画效果
假设我们有一个计算器按钮，在聚焦时，希望通过::after伪元素显示一个动画效果的数字。
原始SCSS/SASS代码片段：
&:focus {
outline: 0;
&::after {
content: " ";
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; /* 初始透明度 */
width: 48px;
}
}对应的纯CSS实现：
要将上述SCSS代码转换为纯CSS，我们需要为.calculatorButton:focus::after这个完整的选择器定义所有样式。
HTML示例：
为了使样式生效，假设我们的HTML结构如下：
完整的纯CSS代码示例：
/* 基础按钮样式（如果需要） */
.calculatorButton {
/* 例如：padding, border, color等 */
display: inline-block;
padding: 10px 15px;
border: 1px solid #ccc;
background-color: #eee;
cursor: pointer;
position: relative; /* 如果伪元素是绝对定位，父元素需要相对定位 */
}
/* 按钮悬停样式 */
.calculatorButton:hover {
background: #201e40;
color: #fff; /* 假设悬停时文字颜色也变化 */
}
/* 按钮聚焦样式 */
.calculatorButton:focus {
outline: 0; /* 移除默认的焦点轮廓 */
}
/* 按钮聚焦时::after伪元素的样式 */
.calculatorButton:focus::after {
content: attr(data-num); /* 从data-num属性获取内容 */
display: table; /* 或 block/inline-block，取决于具体布局需求 */
animation: zoom 1s;
animation-iteration-count: 1;
animation-fill-mode: both;
cursor: default;
font-size: 100px;
position: absolute;
top: 1.5em;
left: 50%;
text-align: center;
margin-left: -24px; /* 用于居中 */
/* opacity: 0; */ /* 原始代码中此处被注释，根据实际需求决定是否启用 */
width: 48px;
/* 如果有zoom动画的定义，也需要包含 */
}
/* 示例动画定义 */
@keyframes zoom {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}注意事项：
- 确认项目配置： 在使用&或嵌套语法之前，请务必确认您的项目是否配置了CSS预处理器（如通过Webpack、Gulp或CLI工具进行编译）。如果未配置，请坚持使用纯CSS语法。
- 可读性与维护性： 尽管预处理器提供了强大的功能，但在纯CSS项目中，清晰地写出完整的选择器路径是确保代码可读性和可维护性的关键。
- 调试： 当遇到样式不生效的问题时，首先检查浏览器开发者工具中的元素样式。如果样式规则没有出现在计算样式中，很可能是语法错误导致CSS解析失败。
总结
&操作符和嵌套选择器是CSS预处理器（如SCSS/SASS）的强大特性，旨在提高CSS开发的效率和组织性。然而，它们并非标准CSS语法。在纯CSS项目中，您需要使用完整的选择器路径来代替&操作符和嵌套规则。正确区分这两种语法环境是避免常见CSS错误、确保样式正常工作并编写高质量代码的关键。理解这些差异将帮助您在不同项目中灵活运用CSS知识，无论是使用预处理器还是纯CSS。
