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

&

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

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

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

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

串联选择器

作用在同一个标签上

<div class=”a” id ="qq"><span>look at the color</span>
</div>
<style> #qq.a{...}
</style>

后代选择器

作用在不同标签上

<div id ="qq"><span class=”a”>look at the color</span>
</div>
<style> #qq .a{...}
</style>