这是我参与「第四届青训营 」笔记创作活动的第5天。
选择器
选择器就是根据不同需求把不同的标签选出来，这就是选择器的作用。
选择器的分类
选择器分为基础选择器和复合选择器两个大类。 基础选择器是由单个选择器组成的。 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。
标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
- 类选择器使用 "."（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
- 可以理解为给这个标签起了一个名字，来表示。
- 长名称或词组可以使用中横线来为选择器命名。
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
- 在标签class属性中写多个类名 。
- 多个类名中间必须用空格分开。
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。 HTML元素以id属性来设置id选择器，CSS中id选择器以“#"来定义。
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
id属性只能在每个HTML文档中出现一次。
通配符选择器
在CSS中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。
* {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | 较多 | p {color: red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red;} |
