css-&、串联选择器和后代选择器的用法

&

&表示嵌套的上一级,这是sass的语法,代表上一级选择器

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

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

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

css-&、串联选择器和后代选择器的用法_第1张图片

串联选择器

作用在同一个标签上

look at the color

后代选择器

作用在不同标签上

look at the color

你可能感兴趣的:(css(less,sass),css,前端)