CSS &符号

在 CSS 中，& 符号是 嵌套语法中的父选择器引用符，重要用于 CSS 预处理处罚器（如 Sass、Less、Stylus）和 今世 CSS 嵌套语法（CSS Nesting）。它代表当前选择器的父级，用于简化嵌套规则并天生更准确的选择器。
1、实例一
第一种写法：

css

2. .resume-dialog-wrap {
3.   &.t-dialog--default {
4.     padding: 0 !important;
5.   }
6. }

复制代码

编译结果：

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

复制代码

表明：

•         &体现将两个类选择器毗连在一起，匹配同时拥有这两个类的元素
  
•         这会选择同时具有resume-dialog-wrap和t-dialog--default类的元素
  

第二种写法：

css

2. .resume-dialog-wrap {
3.   .t-dialog--default {
4.     padding: 0 !important;
5.   }
6. }

复制代码

编译结果：
css

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

复制代码

表明：

•         这种写法体现选择resume-dialog-wrap元素内部的t-dialog--default元素
  
•         这是后代选择器的关系，不是同时拥有两个类的元素
  

关键区别：

•         第一种写法（.resume-dialog-wrap.t-dialog--default），有&毗连选择器，是AND关系，无空格，匹配的是单个元素同时拥有两个类
  
• 第二种写法（.resume-dialog-wrap .t-dialog--default），无&毗连选择器，有空格，空格分隔体现父子/后代关系，匹配的是一个元素内部的后代元素
  

2、实例二
scss

2. .button {
3.   &:hover {
4.     color: red;
5.   }
6. }

复制代码

2. <strong>编译后：</strong>

复制代码

css

2. .button:hover {
3.   color: red;
4. }

复制代码

& 在这里代表 .button，终极天生 .button:hover。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。