本文旨在澄清在原生 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 风格）:
这段代码在原生 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 语法错误，确保样式规则的正确应用，从而构建出稳定且易于维护的网页界面。