1、CSS基础选择器
简单来说，选择器就是根据需求把不同的标签选出来。从而实现CSS的修饰具有针对性。
1.1、标签选择器
语法：
标签名 {
属性: 属性值;
}标签选择器是指以HTML标签名称作为选择器，按照标签名称分类，选中页面内所有的指定标签，实例：
在示例中，我们使用了p {}来选择页面中的所有p标签，随后所有的p内的文字都被修饰为了红色。
这种选择器可以快速为页面中的标签设置统一的初始样式，缺点就是不能对同类标签进行差异化设置，一次只能选中所有标签。
1.2、类选择器
语法：
.类名 {
属性: 属性值;
}类选择器，可以用于差异化设置标签。
对需要修饰的内容，对其加上一个类：class = "类名"。
比如对一个div标签加上一个类：
<div class="nav">这是div内的文字</div>这样div就得到了一个名为nav的类，之后就可以通过类选择器来选中带有nav类的标签了：
.nav {
color: red;
}多个不同的标签可以使用同一个类名，从而实现对多个标签选中：
示例中，对span，div，p各使用了一个nav的类，使用类选择器后，color： red；就对所有带有nav类的标签生效了。
此外，一个标签也可以带有多个类名，从而被多个选择器选中修饰，每个类名之间用一个空格隔开：
<div class="类名1 类名2">这是div内的文字</div>
对于带有多个类名的标签，多个类名会同时生效。
1.3、id选择器
语法：
#id名 {
属性: 属性值;
}对需要修饰的内容，对其加上一个类：id = "id名"。
比如对一个div标签加上一个id：
<div id="nav">这是div内的文字</div>id选择器与类选择器极为相似，唯一的区别就是，类选择器可以使多个标签具有同一个类而对多个标签生效；而id选择器只能对一个标签生效。
类选择器就好比人的名字，一个人可以有多个名字，一个名字也可以被多个人使用。
id选择器就好比人的身份证号码，全国每个人的身份证号码都是唯一的。
1.4、通配符选择器
在CSS中，”*“符号表示所有的元素，称为通配符。我们在需要选中所有元素时，可以使用通配符选择器：
* {
属性: 属性值;
} 这种选择器内部的CSS修饰，会对页面内所有元素生效，在后续常用于清除内外边距：
* {
margin: 0;
padding: 0;
} 2、CSS复合选择器
在CSS中，可以根据选择器的类型吧选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的。
复合选择器可以更准确，更高效的选择目标元素。
2.1、后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套的时候，内层标签就成为外层标签的后代。
语法：
元素1 元素2{
属性: 属性值;
}1.元素1和元素2直接按用空格分开
2.元素1是父级，元素2是子级，最终选择的是元素2
3.元素2可以是儿子，孙子等，只要是元素1的后代即可
4.元素1和元素2可以是任意基础选择器
上图中选择器的意思就是：选中div标签内的所有span。
此处使用的元素1和元素2都是标签选择器，也可以改为其它的选择器：
上图中的选择器意思就是：选中blue类的标签内部的所有span。
2.2、子选择器
子元素选择器，与后代选择器十分相似，但是只选择最近一级的子元素，简单理解就是选择亲儿子。
语法：
元素1>元素2{
属性: 属性值;
}1.元素1与元素2之间用大于号隔开
2.元素1是父级，元素2是子级，最终选择的是元素2
3.元素1和元素2可以是任意基础选择器
上图中的选择器意思就是：选中div标签内部的最近一级span。
相比于之前的后代选择器，子代选择器只选中了第一个span，以为p中的span和div隔了一个p，导致其成为了div的孙子，而不是亲儿子，所以没有选中。
相同的元素1和元素2可以是任意基础选择器。
2.3、并集选择器
并集选择器可以选中多组标签。
并集选择器是将各种选择器通过逗号链接而成，任何形式的选择器都可以成为并集选择器的一部分。
语法：
元素1,元素2{
属性: 属性值;
}上图中选择器的目的是：同时选中元素1与元素2。
示例：
此处的并集选择器，同时选中了h2和h4标签。
它的两个元素可以是任意选择器，包括其他的复合选择器：
此处的并集选择器，并上了一个后代选择器与一个子代选择器。
2.4、伪类选择器
伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第n个元素。
伪类选择器的最大特点就是用冒号(:)表示，比如: hover，: first-child。
因为伪类选择器比较多，此处选出了比较常用的几种。
- 链接伪类选择器
a: link选择未被访问的链接
a: visited选择已被访问的链接
a: hover选择鼠标指针位于其上方的链接
a: active选择活动链接（鼠标按下未弹起的链接）
上面的链接在一次点击后，转换了四次颜色，分别就是四个伪类选择器对应的效果。
这种伪类选择器也不仅仅可以作用与a链接，只要你需要在移动鼠标后产生交互，都可以尝试这个伪类选择器。
要注意：这种链接伪类选择器在使用时，一定要按照link，visited， hover， active书写，否则无法产生对应效果。
- :focus伪类选择器
：focus 伪类选择器用于选取获得焦点的表单元素，所谓焦点就是光标，也就是当你的光标在哪个表单上，哪个表单就会被这个选择器选中。
示例中有三个表单，我们用:focus选中了表单，对其修饰天蓝色背景。这样一来，只要我们的光标在哪里，哪一个表单的背景色就会变成天蓝色。
3、CSS三大特性
3.1、层叠性
当两个选择器都对一个元素修饰了相同的样式，会发生什么？
p {
color: red;
font-weight: 700;
}
p {
color: skyblue;
}
<p>这是一个段落</p>
请问这个p标签，最后呈现了什么颜色，是粗是细?
这就涉及到了层叠性：
当两个选择器都对一个元素修饰了相同的样式，此时后一个样式就会覆盖（层叠）掉前一个样式。
在上方示例中，第二个skyblue的修饰比red的修饰离p更近，所以最好skyblue会把red覆盖掉。 那么font-weight呢？
在第二个标签中，虽然它离p更近，但是它没有修饰font-weight，所以没有发生冲突，无法把font-weight覆盖掉，最后font-weight: 700;还是会执行。
所以最后文字表现为天蓝色，粗体：
3.2、继承性
在CSS中，子标签会继承父标签的某些样式，比如文本颜色和字号。
上图中，div被修饰了字体颜色为红色，粗体。但是我们并没有对p修饰，p作为div的子代，继承了div的字号和颜色，也展现了红色粗体。
一般来说，以text-,font-,line-开头的属性以及color具有继承性。
3.3、优先级
当一个元素被多个选择器选中，还有另外一种情况，先前的情况是，两个都用了标签选择器来选中，就会展现层叠性。但是当两个选择器的类型不同，那么就会展现优先级了。
选择器冲突：
选择器相同：执行层叠性
选择器不同：执行优先级
选择器的优先级取决于选择器的权重：
选择器 | 权重 |
从父级继承/通配符* | 0.0.0.0 |
标签选择器 | 0.0.0.1 |
类选择器/伪类选择器 | 0.0.1.0 |
id选择器 | 0.1.0.0 |
行内样式style="" | 1.0.0.0 |
！important修饰 | 无限 |
越往下优先级越高，上面的依次被代替。
此外，CSS还提供了一个!important，其作用于某个属性后，使其可以无视优先级产生作用：
虽然类选择器优先级比不过行内和id选择器，但是由于!important，最后还是产生了绿色效果。
3.4、权重的叠加
刚刚我们的优先级是基于基础选择器的，而复合选择器是会包含多个基础选择器的，此时就会发生权重的叠加：
div ul li 权重为：0.0.0.1 + 0.0.0.1 + 0.0.0.1 = 0.0.0.3
.nav ul li 权重为：0.0.1.0 + 0.0.0.1 + 0.0.0.1 = 0.0.1.2
a:hover 权重为：0.0.0.1(a) + 0.0.1.0 (:hover)= 0.0.1.1
.nav a 权重为：0.0.1.0 + 0.0.0.1 = 0.0.1.1
权重的叠加只需要在相应的位上相加即可，选择器的权重不会进位，比如十一个标签选择器的权重累加，其最终权重为0.0.0.11，仍然小于0.0.1.0。
提权：
现在我们有两个选择器，第一个选择器选中了：div里面的ul里面的li，第二个选择器选中了ul里面的li，最后执行的是红色，这是为什么？
我们计算一下权重：
div ul li 权重为：0.0.0.1 + 0.0.0.1 + 0.0.0.1 = 0.0.0.3
ul li 权重为：0.0.0.1 + 0.0.0.1 = 0.0.0.2
所以最后展现为权重高的红色，如果我们想在不破坏第一个选择器的情况下，让字体颜色变为天蓝色，此时就需要对第二个选择器进行提权。
我们看到，div是带有一个类名nav的，只要我们对第二个选择器加上这个类，其权重就会变成 0.0.1.2，文字就可以展现天蓝色了。
