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> 

属性选择器

通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

a[target]：选择带有target属性的<a>元素

input[type="text"]：选择所有 type 属性为 "text" 的 <input> 元素（其中的双引号可以省略）

[name]：选择所有带有name属性的元素