css样式中&的用法

一、认识“&”

        在css中，“&”符号通常用于选择器中，表示选择某个元素的子元素或特定状态下的元素

二、“&”的用法

1、&- ：连接父元素和子元素的类名

        用法：

.btn {
  &-primary {
    background-color: #007bff;
    color: #fff;
  }
}

        编译出来的结果是在btn后面拼接了类名:

.btn-primary {  
   background-color: #007bff;
   color: #fff;
}

2、&. ：连接父元素和子元素的类名

        用法：

.btn {
  &.primary {
    background-color: #007bff;
    color: #fff;
  }
}

        编译出来的结果是同一个元素，有两个类名，两个类名之间没有空格：

.btn.primary {
   background-color: #007bff;
   color: #fff;
}

3、&::before和&::after  ：表示在当前元素的前面或后面插入伪元素

        用法：

btn {
  &::before {
    content: "⚡️";
  }
  
  &::after {
    content: "🎉";
  }
}

        编译出来的结果是在button 元素前面插入一个内容为 "⚡️" 的伪元素，以及在 button 元素后面插入一个内容为 "🎉" 的伪元素：

button::before {
  content: "⚡️";
}

button::after {
  content: "🎉";
}

4、&:hover和&:focus  ：表示鼠标悬停或聚焦时应用的样式

        用法：

btn {
  &:hover {
    background-color: #eee;
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px #007bff;
  }

        编译后的结果是当用户悬停在 button 元素上时，应用 background-color: #eee; 样式；当用户聚焦在 button 元素上时，应用 outline: none; box-shadow: 0 0 0 2px #007bff; 样式。

5、&[attribute=value]  ：表示选择具有特定属性和属性值的元素

        用法：

btn {
  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  &[type="submit"] {
    background-color: #007bff;
    color: #fff;
  }
}

        编译出来的结果是选择具有 disabled 属性的 button 元素，并应用 opacity: 0.5; cursor: not-allowed; 样式；同时选择具有 type="submit" 属性的 button 元素，并应用 background-color: #007bff; color: #fff; 样式：

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

button[type="submit"] {
  background-color: #007bff;
  color: #fff;
}

6、&:nth-child(n)和&:nth-of-type(n)：表示选择特定位置的子元素或同类型元素

        用法：

ul {
  li {
    &:nth-child(odd) {
      background-color: #f7f7f7;
    }
    
    &:nth-of-type(even) {
      color: #007bff;
    }
  }
}

三、&由什么语法提供

&-、&.：由Sass和Less等CSS预处理器提供
&::before和&::after、
&:hover和&:focus、
&[attribute=value]、
&:nth-child(n)和&:nth-of-type(n) ：由CSS原生语法提供