CSS &符号

在 CSS 中，& 符号是 嵌套语法中的父选择器引用符 ，主要用于 CSS 预处理器 （如 Sass、Less、Stylus）和 现代 CSS 嵌套语法 （CSS Nesting）。它代表当前选择器的父级，用于简化嵌套规则并生成更精确的选择器。

1、实例一

第一种写法：

css

.resume-dialog-wrap {
  &.t-dialog--default {
    padding: 0 !important;
  }
}

编译结果：

[data-v-xxxxxxx] .resume-dialog-wrap.t-dialog--default {
  padding: 0 !important;
}

解释：

• &表示将两个类选择器连接在一起，匹配同时拥有这两个类的元素

• 这会选择同时具有resume-dialog-wrap和t-dialog--default类的元素

第二种写法：

css

.resume-dialog-wrap {
  .t-dialog--default {
    padding: 0 !important;
  }
}

编译结果：

css

[data-v-xxxxxxx] .resume-dialog-wrap .t-dialog--default {
  padding: 0 !important;
}

解释：

• 这种写法表示选择resume-dialog-wrap元素内部的t-dialog--default元素

• 这是后代选择器的关系，不是同时拥有两个类的元素

关键区别：

1. 第一种写法（.resume-dialog-wrap.t-dialog--default），有&连接选择器，是AND关系，无空格，匹配的是单个元素同时拥有两个类

2. 第二种写法（.resume-dialog-wrap .t-dialog--default），无&连接选择器，有空格，空格分隔表示父子/后代关系，匹配的是一个元素内部的后代元素

2、实例二

scss

.button {
  &:hover {
    color: red;
  }
}

编译后：

css

.button:hover {
  color: red;
}

& 在这里代表 .button，最终生成 .button:hover。