1. class 和 id 的使用场景?
class可以用于多个元素，而id只能用于一个元素。
所以当你要给多个元素设置相同的样式时，可以把它们设置相同的classname，这样你只需要写一组CSS代码，就能同时作用于多个元素。
2. CSS选择器常见的有几种?
常见的选择器
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
优先级顺序
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式（不推荐使用）
- 作为style属性写在元素标签上的内联样式（不推荐使用）
- id选择器（选择时用 # + id名）
- 类选择器（选择时用 . + class名）
- 伪类选择器（hover、visited等。。。伪类表示元素的另一种状态）
- 属性选择器
- 标签选择器
- 通配符选择器（*）
- 浏览器自定义
复杂场景下通过计算权重决定优先级
方法：先数 id选择器数量，如果id选择器数量多的选择器权重高。
如果id选择器数量相同，再数类选择器数量，最后数标签。
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确的顺序为a:link、a:visited、a:hover、a:active (其中，link和visited可以互换)
- 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
- 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面,
5. 以下选择器分别是什么意思?
选择器
- 选择Id=header的元素
- 选择class=header的元素
- 选择class=header元素的后代元素中class=logo的元素
- 选择class名既有header又有mobile的元素
- 同时选择class=header的后代p标签，和class=header的后代h3标签
- 选择id=header的后代中，class=nav的直接子元素中的li标签
- 选择id=header的后代处在hover状态（鼠标悬停其上）下的a标签
- 选择id=header的后代中，class=logo的元素之后的同级元素中的p标签
- 选择id=header的后代中，input标签中属性type的值为"text"的元素
-
列出你知道的伪类选择器
- E:first-child：匹配元素E的父元素的第一个子元素，且为E
- E:nth-child(n)：匹配元素E的父元素的第n个子元素，且为E
- E:enabled和E:disabled：匹配元素E的状态为可用/不可用
- E:checked和E:selection：匹配元素E的状态为单选框选中/复选框选中
- a:link：未被点击的链接
- a:visited：已被点击的链接
- a:hover：鼠标悬停其上的链接
- a:active：鼠标已经按下，但没有释放的链接
-
div:first-child和div:first-of-type的作用和区别
- div:first-child：父元素的第一个子元素,且第一个子元素必须为div才能被选中
- div:first-of-type：父元素中的第一个div子元素
-
运行如下代码，解析下输出样式的原因。
权重计算
.item1:first-child选中的是class=item1的元素的父元素div的第一个子元素，即p元素，且p元素为div的第一个子元素。所以aa的颜色为红色。
.item1:first-of-type选中的是class=item1的元素的父元素div的子元素里，每种标签的第一个，即p和第一个h3。所以aa、bb的背景色为蓝色。
cc为默认样式。
如下图所示：
结果
