class 和 id 的使用场景?
class属性：
指定标签的类名，CSS操作中，把一些特定的样式放到一个类中，需要此样式的标签，可以添加此类，可以把多个类放到一个class属性中，但必须用空格隔开来。
id属性：
1、指定标签的唯一id号，快速获取标签对象，如：document.getElementById(id);
2、用于充当label标签for属性的值。
3、CSS中，用于对应的id选择器 #id名{xxx：xxx}。
CSS选择器常见的有几种?
基础选择器
1、*{ }：通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
2、#id：id选择器，匹配特定id的元素
3、.class：类选择器，匹配class包含(不是等于)特定类的元素
4、element：标签选择器，直接使用标签名
范例：
- {
margin: 0;
padding: 0;
}
‘#id-selector{
color: #333;
}
.class-selector{
background: #ccc;
}
p {
font-size: 20px;
}
组合选择器：
1、E,F：多元素选择器，用,分隔，同时匹配元素E或元素F
2、E F：后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
3、E>F：子元素选择器，用>分隔，匹配E元素的所有直接子元素F
4、E+F：直接相邻选择器，匹配E元素之后的相邻的同级元素F
5、E~F：普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
6、.class1.class2：id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
7、element#id：id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
范例：
1、div,p{xxx：xxx} 同时匹配div元素和p元素
2、div p{xxx：xxx}匹配div元素下的所有子元素p（包括孙元素）
3、div>p{xxx：xxx} 匹配div元素下的所有第一级子元素p（不包括孙元素）
4、h1+p{xxx：xxx} 匹配所有h1元素之后的相邻的同级p元素
5、h1~p{xxx：xxx} 匹配h1元素之后的所有同级p元素
属性选择器：
1、E[attr]：匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
2、E[attr = value]：匹配属性attr值为value的元素，div[id=test],匹配id=test的div
3、E[attr ~= value]：匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
4、E[attr ^= value]：匹配属性attr的值以value开头的元素
5、E[attr $= value]：匹配属性attr的值以value结尾的元素
6、E[attr *= value]：匹配属性attr的值包含value的元素
伪类选择器
E:first-child 匹配作为长子（第一个子女）的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素
注意：n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even
伪元素选择器
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
CSS选择器优先级问题
从高到低分别是
1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2、作为style属性写在元素标签上的内联样式
3、id选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配符选择器
9、浏览器自定义
复杂场景中：
1.如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a)（HTML元素的style属性也是样式规则，因为这些样式规则没有选择器，因此记为a=1,b=0,c=0,d=0）
2.计算选择器中 ID 属性的个数 (= b)
3.计算选择器中其他属性(类、属性选择器)和伪类的个数 (= c)
4.计算选择器中元素名称和伪元素的个数 (= d)
四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是 行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
若是 元素选择符/伪元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
需注意的：
①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;
②、优先级相同时，则采用就近原则，选择最后出现的样式;
③、继承得来的属性，其优先级最低;
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active：
a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。
原因：
1、链接未被访问时，鼠标经过同时拥有link,hover两种属性，后面的属性会覆盖前面属性的定义。
2、链接被点击时会触发active属性，同时覆盖前面的属性
3、链接被访问过后，鼠标经过时同时拥有visited、hover两种属性。
4、所以说hover要放在link、visired的后面。
div:first-child和div:first-of-type的作用和区别
先看下面一条代码：
p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；
p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；
h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；
span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。
总结：
1、:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
2、:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
3、同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。
