原生 CSS 中 & 符号与嵌套选择器的正确用法解析-html教程-PHP中文网

原生 CSS 中 & 符号与嵌套选择器的正确用法解析

DDD

发布： 2025-10-29 10:03:14

原创

204人浏览过

原生 CSS 中 & 符号与嵌套选择器的正确用法解析

本文旨在澄清在原生 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 中是无效的。

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

108

查看详情

正确示例（原生 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;。