CSS Sass Less 样式.xxx讲解

在 CSS（尤其是使用 Sass/Less 等预处理器时）中， &.xxx  表示选中“当前选择器所匹配的元素”同时还拥有 class 为 "xxx" 的元素。

 

 &  是一个特殊符号，代表“父选择器”，用于拼接选择器，避免重复书写。

 

示例：

 

假设原 CSS 预处理器代码为：

 

scss

.button {

  color: black;

  &.active { /* 等价于 .button.active */

    color: red;

  }

}

 

 

编译后的标准 CSS 为：

 

css

.button {

  color: black;

}

.button.active { /* 匹配同时有 .button 和 .active 类的元素 */

  color: red;

}

 

 

这里的  &.active  就是选中同时具有  button  和  active  两个类的元素，而不是选中  .button  内部的  .active  元素（后者写法是  .button .active ，有空格）。