选择器可以选择以下3种元素
- 类（或ID）
- 标签
- 类（或ID）与标签组合
表示方式为：
| 类 | 标签 | ID | |
|---|---|---|---|
| HTML | class="cla" | <lab> | id="num" |
| CSS | .cla | lab | #num |
注意：类与ID类似，下面的例子的类也可以换成ID
一、CSS的选择器
1、多（类）选择器
（1）类或标签
选择含有"cla1 cla2"的标签，改变【内容2】、【内容3】
.cla1.cla2 {
width: 100%;
}
<div class="cla1">
内容1
</div>
<div class="cla1 cla2">
内容2 <!-- 改变 -->
</div>
<div class="cla1 cla2 cla3">
内容3 <!-- 改变 -->
</div>
（2）标签与类的组合
table.cla1.cla2 {
width: 100%;
}
<table class="cla1 cla2">
内容 <!-- 改变 -->
</table>
2、群组选择器
（1）类或标签
选择含有cla1、cla2、cla3任一个class的标签，改变【内容1】、【内容2】、【内容3】
.cla1, .cla2, .cla3 {
width: 100%;
}
<div class="cla1">
内容1 <!-- 改变 -->
</div>
<div class="cla1 cla2">
内容2 <!-- 改变 -->
</div>
<div class="cla1 cla2 cla3">
内容3 <!-- 改变 -->
</div>
（2）标签与类的组合
table, .cla1, .cla2 {
width: 100%;
}
<div class="cla1">
内容1 <!-- 改变 -->
</div>
<div class="cla2">
内容2 <!-- 改变 -->
</div>
<table>
内容3 <!-- 改变 -->
</table>
3、相邻选择器
（1）类或标签
选择cla1后面紧接的cla2（同一父级），改变【内容2】
.cla1 + .cla2 {
width: 100%;
}
<div class="cla0">
<div class="cla1">
内容1
</div>
<div class="cla2">
内容2 <!-- 改变 -->
</div>
</div>
（2）标签与类的组合
h1 + cla1 {
width: 100%;
}
<div class="cla0">
<h1>
内容1
</h1>
<div class="cla1">
内容2 <!-- 改变 -->
</div>
</div>
4、子代(类)选择器
（1）类或标签
选择 cla1>cla2>cla3 这种嵌套结构的全部cla3标签（直接后代），改变【内容1】
.cla1
>.cla2
>.cla3 {
width: 100%;
}
<div class="cla1">
<div class="cla2">
<div class="cla3">
内容1 <!-- 改变 -->
<div class="cla3">
内容2
</div>
</div>
</div>
</div>
（2）标签与类的组合
table
>.cla1
>td {
width: 100%
}
<table>
<div class="cla1">
<td>
内容 <!-- 改变 -->
</td>
</div>
</table>
5、后代(类)选择器
（1）类或标签
选择 cla1后代里面的全部cla3标签（不管后代嵌套得有多深），改变【内容1】、【内容2】
.cla1 .cla3 {
width: 100%;
}
<div class="cla1">
<div class="cla2">
<div class="cla3">
内容1 <!-- 改变 -->
<div class="cla3">
内容2 <!-- 改变 -->
</div>
</div>
</div>
</div>
（2）标签与类的组合
.cla1 h1 {
width: 100%;
}
<div class="cla1">
<td>
<h1>
内容 <!-- 改变 -->
</h1>
</td>
</div>
6、伪类选择器
伪类必须配合正常的类来使用
下面例子改变未访问链接【内容】的颜色，:link这个伪类必须配合<a>或其他标签才能使用
a:link {
color: #fff
}
<a href="www.baidu.com">
内容 <!-- 改变 -->
</a>
第N个子元素选择器
实际上此选择器并没有这么通俗易通的名字，是我自己归纳的出来以便记忆
顾名思义就是可以选择某个父元素的第N个子元素，实际开发中经常用到且容易混淆
:xxx-of-type系列
:first-of-type
选择第一个元素
二、SCSS的选择器
1、多（类）选择器
.cla1.cla2.cla3 {
width: 100%;
}
.cla1 {
&.cla2.cla3 {
width: 100%;
}
}
2、群组选择器
.cla1, .cla2, .cla3 {
width: 100%;
}
.cla1 {
&, .cla2, .cla3 {
width: 100%;
}
}
3、相邻选择器
.cla1 + .cla2 {
width: 100%;
}
.cla1 {
+ .cla2 {
width: 100%;
}
}
//或者是反过来写
.cla2 {
.cla1 + & {
width: 100%;
}
}
4、子代（类）选择器
.cla1>.cla2>.cla3 {
width: 100%;
}
.cla1 {
>.cla2>.cla3 {
width: 100%;
}
}
//或者是从子类写到父类（根据自己实际需要）
.cla2 {
.cla1>&>.cla3 {
width: 100%;
}
}
5、后代（类）选择器
.cla1 .cla3 {
width: 100%;
}
.cla1 {
.cla3 {
width: 100%;
}
}
//或者是从子类写到父类（根据自己实际需要）
.cla3 {
.cla1 & {
width: 100%;
}
}
6、伪类选择器
a:link {
color: #ffffff;
}
a {
&:link {
color: #ffffff;
}
}
7、自定义类（BEM）的选择
.cla1 {
width: 100%;
}
.cla2 {
width: 100%;
}
//以前的用法
.cla {
@at-root #{&}1 {
width: 100%;
}
@at-root #{&}2 {
width: 100%;
}
}
//新支持的用法（后面最好不要跟【标签】或【属性】名）
.cla {
&1 {
width: 100%;
}
&2 {
width: 100%;
}
}
8、属性的选择
.cla1 {
border-width: 1px;
border-style: soild;
border-color: #ffffff;
}
.cla1 {
//特别注意，下面需要写冒号（:）
border: {
width: 1px;
stlye: soild;
color: #ffffff;
}
}
