1. class 和 id 的使用场景?

class可以用于多个元素，而id只能用于一个元素。
所以当你要给多个元素设置相同的样式时，可以把它们设置相同的classname，这样你只需要写一组CSS代码，就能同时作用于多个元素。

2. CSS选择器常见的有几种?

常见的选择器

3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？

优先级顺序

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式（不推荐使用）
2. 作为style属性写在元素标签上的内联样式（不推荐使用）
3. id选择器（选择时用 # + id名）
4. 类选择器（选择时用 . + class名）
5. 伪类选择器（hover、visited等。。。伪类表示元素的另一种状态）
6. 属性选择器
7. 标签选择器
8. 通配符选择器（*）
9. 浏览器自定义

复杂场景下通过计算权重决定优先级
方法：先数 id选择器数量，如果id选择器数量多的选择器权重高。
如果id选择器数量相同，再数类选择器数量，最后数标签。

4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

正确的顺序为a:link、a:visited、a:hover、a:active (其中，link和visited可以互换)

1. 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2. 鼠标经过的“已访问链接”同时拥有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为默认样式。
如下图所示：

结果