1.class和id的使用场景
id指定了标签的唯一标识，id属性的值，在当前的page页面要是唯一的。
使用场景：
根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。
class指定了标签的类名，可以把多个类，放在一个class属性里，但必须用空格隔开。
使用场景：
CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
2. CSS常见选择器类型
1. 基础选择器
- 通用元素选择器，匹配页面任何（所有）元素，所以很少使用
- id选择器，匹配特定id的元素
- 类选择器，匹配特定class包含（不是等于）特定类的元素
- element，标签选择器
2. 组合选择器
- E,F 多元素选择器，并列匹配元素E或F
- E F 后代选择器，E元素的所有后代，子子孙孙
- E>F 子元素选择器，E元素的直接子元素，向下第一层，不再嵌套
- E+F 直接相邻选择器，同级的相邻元素F
- E~F 普通相邻选择器（弟弟选择器），E元素同一层的所有邻居，无论相邻与否
- .class1.class2 可跨级
- element#id 具有此id的所有标签
3. 属性选择器
- E[attr] 匹配所有具有attr属性的元素
- E[attr=value] 匹配所有属性attr值为value的元素
4. 伪类选择器
- E:link 匹配没有被点击过的链接
- E:visited 匹配已被点击过的链接
- E:hover 匹配鼠标悬停其上的链接（亦可是其他元素）
- E:active 匹配按下的元素
- E:focus 匹配当前焦点元素
- E:enabled 匹配可用元素
- E:disabled 匹配不可用元素
- E:root 匹配文档的根元素
- E:checked 匹配被选中的radio或checkbox元素
- E:selection 匹配当前被选中的元素
- E:nth-child 匹配其父元素的第n个子元素
- E:nth-last-child 匹配其父元素的倒数第n个子元素
- E:nth-of-type(n) 匹配其父元素的第n个拥有同种标签的子元素
- E:nth-last-of-type(n) 匹配其父元素的倒数第n个拥有同种标签的子元素
n的取值：
- 1,2,3,4,5
- 2n+1,2n,4n-1 （当想给奇数偶数行或不同行添加不同效果时可灵 活改变n的取值）
- odd，evev
5.伪元素选择器
- E::first-line 匹配E元素内容的第一行
- E::first-letter 匹配E元素内容的第一个字母
- E::before 在E元素之前插入生成的内容
- E::after 在E元素之后插入生成的内容
3. 选择器的优先级
由高到低：
- !import 会覆盖所有其他元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
针对复杂的情况，根据权重来排序
- 行内样式==>a
- id选择器==>b
- 类、属性选择器和伪类选择器==>c
- 标签选择器、伪元素选择器==>d
- 列出a、b、c、d的值，权重a>b>c>d，按照此顺序排出优先级。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序如下：
a:link
a:visited
a:hover
a:active因为点击过link链接后，visited就永久生效了，会把其他都覆盖，所以要放到hover和active前面，而只有当鼠标悬停在link上时，hover生效，所以hover要在active之前。
4. 其他
-
以下选择器分别是什么意思?
一些选择器
匹配id为header的元素
匹配类名为header的元素
匹配类名为header的元素的后代中类名为logo的元素
匹配类名为header和类名为logo的元素
匹配类名为header的元素的后代中名为p的元素和h3的元素
匹配id为header的后代中类名为nav的直接子元素li
将id为header的后代中名为a的伪类元素悬停
匹配id为header的所有后代中类名为logo的同级元素p
匹配类名为header的元素的后代中input类名下type属性值为text的元素 div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
div:first-child：匹配其父元素的第一个div块
div:first-of-type：匹配其父元素的第一个拥有同种标签的div块
div :first-child：匹配div块的所有后代中的第一个子元素
div first-of-type：匹配div块的所有后代中拥有同种标签的第一个子元素
- 运行如下代码，解析下输出样式的原因。
输出样式为：
- item1:first-child{ color: red;}会匹配父元素下的第一个子元素，即p元素，将其字体颜色设置成红色；
- item1:first-of-type会匹配父元素下的类名为item1的元素，那么这里就会选择p.item1,第一个h3.item1，将其背景颜色设置为蓝色。
