本文旨在澄清在原生 css 中使用 `&` 符号和嵌套选择器的常见误解。许多开发者习惯于 scss/sass 等预处理器的便利语法，但在纯 css 环境下，这些特性会导致样式失效。文章将详细解释原生 css 如何正确地定义伪元素和处理选择器关系，并提供清晰的代码示例，帮助开发者避免此类语法错误，确保样式规则的正确应用。
在前端开发中，CSS 预处理器如 SCSS/SASS 极大地提升了样式表的编写效率和可维护性。它们引入了变量、混合宏、函数以及嵌套规则等高级特性，其中 & 符号和嵌套选择器便是其核心优势之一。然而，对于初学者或在纯 CSS 项目中工作的开发者而言，将这些预处理器语法误用于原生 CSS 文件中，是导致样式不生效的常见原因。
原生 CSS 与预处理器语法的根本区别
原生 CSS（Plain CSS）是一种声明式语言，其语法规则严格。它不支持选择器的嵌套，也不识别 & 这种引用父选择器的特殊符号。这些功能是 SCSS/SASS 等预处理器在编译阶段提供的。预处理器会将复杂的、嵌套的语法编译成浏览器能够理解的标准 CSS 格式。
当在原生 CSS 文件中使用以下 SCSS/SASS 语法时，浏览器将无法解析，从而导致样式错误：
- & 符号：在 SCSS/SASS 中，& 符号代表当前选择器，常用于连接伪类（如 &:hover）或伪元素（如 &::before），或者构建复合选择器。
-
选择器嵌套：在 SCSS/SASS 中，可以将子选择器写在父选择器内部，提高代码的组织性。例如：
.parent { .child { /* ... */ } }会被编译为 .parent .child { /* ... */ }。
立即学习“前端免费学习笔记（深入）”；
在原生 CSS 中正确使用伪元素与选择器
理解了上述区别，我们就能明确在原生 CSS 中如何正确地编写样式规则。关键在于始终使用完整的、明确的选择器路径。
1. 伪元素（::before, ::after）的正确用法
伪元素用于在元素内容的前面或后面插入生成的内容。在原生 CSS 中，必须将伪元素直接附加到其目标选择器上。
错误示例（SCSS/SASS 风格）:
&::before,
&::after {
content: " ";
display: table;
}这段代码在原生 CSS 中是无效的，因为 & 符号不被识别。
正确示例（原生 CSS）:
假设我们要为 calculatorButton 类添加伪元素，正确的写法应该是：
.calculatorButton::before,
.calculatorButton::after {
content: " ";
display: table;
}这里，我们明确指定了伪元素所属的类选择器 .calculatorButton。
2. 伪类（:hover, :focus）的正确用法
伪类用于选择处于特定状态的元素。与伪元素类似，它们也需要直接附加到目标选择器上。
错误示例（SCSS/SASS 风格）:
&:hover {
background: #201e40;
}
&:focus {
outline: 0;
&::after { /* 嵌套伪元素也是错误的 */
/* ... */
}
}同样，& 符号和伪元素的嵌套在原生 CSS 中是无效的。
正确示例（原生 CSS）:
.calculatorButton:hover {
background: #201e40;
}
.calculatorButton:focus {
outline: 0;
}
/* 注意：伪元素需要单独定义，并明确指定其所属的选择器 */
.calculatorButton:focus::after {
content: " ";
display: table;
animation: zoom 1s;
animation-iteration-count: 1;
animation-fill-mode: both;
content: attr(data-num); /* 此处可能存在 content 属性的重复定义，请注意 */
cursor: default;
font-size: 100px;
position: absolute;
top: 1.5em;
left: 50%;
text-align: center;
margin-left: -24px;
opacity: 0; /* 如果需要初始隐藏，请确保 opacity 为 0 */
width: 48px;
}3. 嵌套选择器的正确用法
在原生 CSS 中，没有“嵌套”的概念。如果需要针对父元素内的子元素应用样式，必须使用完整的后代选择器、子选择器或其他组合选择器。
错误示例（SCSS/SASS 风格）:
.parent {
.child {
/* ... */
}
}正确示例（原生 CSS）:
.parent {
/* 父元素的样式 */
}
.parent .child {
/* 父元素内的子元素样式 */
}这里的 .parent .child 是一个后代选择器，表示选择所有作为 .parent 元素后代的 .child 元素。
综合示例：计算器按钮样式优化
让我们以一个实际的计算器按钮为例，展示如何将 SCSS/SASS 风格的语法转换为正确的原生 CSS。
HTML 结构:
<button data-num="10" class="calculatorButton">10</button>
原始问题中的 SCSS/SASS 风格代码片段：
&::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 后的代码：
/* 定义基础按钮样式（如果需要） */
.calculatorButton {
/* 基础样式，例如： */
padding: 10px 15px;
border: 1px solid #ccc;
background-color: #f0f0f0;
cursor: pointer;
position: relative; /* 为伪元素定位提供参考 */
}
/* 为 .calculatorButton 添加 ::before 和 ::after 伪元素 */
.calculatorButton::before,
.calculatorButton::after {
content: " ";
display: table;
}
/* 清除浮动，通常用于父元素包含浮动子元素的情况 */
.calculatorButton::after {
clear: both;
}
/* 鼠标悬停时的样式 */
.calculatorButton:hover {
background: #201e40;
color: #fff; /* 假设悬停时文字颜色变为白色 */
}
/* 元素获得焦点时的样式 */
.calculatorButton:focus {
outline: 0; /* 移除默认的焦点轮廓 */
}
/* 元素获得焦点时其 ::after 伪元素的样式 */
.calculatorButton:focus::after {
/* 注意：这里 content 属性被定义了两次，
' ' 和 attr(data-num)。通常会以最后一个生效。
如果希望显示 data-num 的值，应只保留 attr(data-num)。
如果需要 ' ' 作为初始内容，而动画结束后显示 data-num，
则需要更复杂的动画或 JS 控制。
这里我们假设最终目的是显示 data-num 的值。 */
content: attr(data-num); /* 显示 data-num 属性的值 */
display: block; /* 使其可以定位和设置宽高 */
animation: zoom 1s;
animation-iteration-count: 1;
animation-fill-mode: both;
cursor: default;
font-size: 100px;
position: absolute;
top: 1.5em;
left: 50%;
transform: translateX(-50%); /* 替代 margin-left 实现水平居中 */
text-align: center;
/* margin-left: -24px; /* 如果 width 是 48px，则 margin-left -24px 是居中 */
opacity: 0; /* 初始透明度为0，通过动画逐渐显示 */
width: 48px;
height: 48px; /* 假设高度也为48px */
pointer-events: none; /* 确保伪元素不阻挡鼠标事件 */
background-color: rgba(0, 0, 0, 0.5); /* 示例背景，便于观察效果 */
color: #fff; /* 示例文字颜色 */
border-radius: 50%; /* 示例圆形效果 */
line-height: 48px; /* 垂直居中文字 */
}
/* 定义 zoom 动画 */
@keyframes zoom {
0% {
opacity: 0;
transform: translateX(-50%) scale(0.5);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.1);
}
100% {
opacity: 0; /* 动画结束后再次隐藏 */
transform: translateX(-50%) scale(1);
}
}注意事项：
- 在 content: " "; 和 content: attr(data-num); 同时出现时，通常会以最后定义的 content 属性值为准。如果希望动画过程中内容有变化，可能需要更精细的动画或 JavaScript 控制。
- 伪元素默认是内联元素，如果需要设置宽度、高度、定位等，通常需要将其 display 属性设置为 block, inline-block 或 table 等。
- 为了实现水平居中，left: 50%; 配合 transform: translateX(-50%); 是更现代和灵活的方案，可以替代固定的 margin-left。
- opacity: 0; 在 calculatorButton:focus::after 中定义，确保了伪元素在动画开始前是不可见的。动画结束后如果希望再次隐藏，动画的 100% 状态也应设置 opacity: 0;。
总结
在编写 CSS 样式时，明确当前项目是使用原生 CSS 还是预处理器（如 SCSS/SASS）至关重要。虽然预处理器提供了许多便利的语法糖，但这些语法在原生 CSS 环境下是无法识别的。
关键要点：
- 原生 CSS 不支持 & 符号：始终使用完整的选择器名称来定位元素及其伪类/伪元素。
- 原生 CSS 不支持选择器嵌套：每个选择器规则都应独立声明，通过组合选择器（如后代选择器 .parent .child）来表达元素间的层级关系。
- 注意 content 属性：当为伪元素定义 content 时，确保其值符合预期，避免重复定义导致意外结果。
- 定位伪元素：为伪元素设置 position: absolute; 时，其父元素通常需要设置 position: relative; 来作为定位参考。
遵循这些原则，可以有效避免常见的 CSS 语法错误，确保样式规则的正确应用，从而构建出稳定且易于维护的网页界面。
