揭秘 CSS 伪元素选择器中的 & 符号

当在 CSS 中遇到这样的代码时，很自然地想知道 & 符号 (&) 的意义) 字符:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

但是，需要注意的是，此语法不是 CSS 的一部分。相反，它属于名为 LESS 的 CSS 预处理器。

LESS 允许您使用 & 字符嵌套选择器修饰符。这使您能够通过避免重复来编写简洁且可读的代码。例如：

.clearfix { 
  &:before {
    content: '';
  }
}

这将编译为：

.clearfix:before {
  content: '';
}

& 符号确保嵌套选择器编译为 .clearfix:before。如果没有它，它们将编译为 .clearfix :before，这将导致无效的 CSS 选择器。

在您提供的 Twitter Bootstrap 示例中，& 符号用于将样式应用于伪元素 (::before和 ::after) 作为 .clearfix 元素的子元素创建。这允许您简洁地定义这些伪元素并在 CSS 中维护模块化结构。