1. class 和 id 的使用场景?
class标签，标识一类，全页面不唯一，可以重复，标识一个类别；
id标签，标识一个，全页面唯一。
2. CSS选择器常见的有几种?
基本选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
单个选择器权重排行（1权重最高，依次递减）
- !important 权重最重
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
对于复杂场景，选择器优先级分以下4种权重范围：
a. 行内样式，如：<div style="xxx"></div>
b. id选择器
c. 类、属性、伪类选择器
d. 标签、伪元素选择器
以上4种权重范围与复杂场景下的选择器进行匹配，有即得一，没有得零。有a比a，没a比b，依次类推，a权重最高，d权重最低，得出最大最小值。
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确排序如下：
a:link {
color: black;
}
a:visited {
color: yellow;
}
a:hover {
color: red;
}
a:active {
color: brown;
}
此处涉及到了样式覆盖的问题，相同类型的选择器（伪类选择器类型），下面的会自动覆盖上面的。
当未点击时，样式停留在了a:link{color: black;}状态，当点击过时，样式停留在了a:visited{color:yellow;}状态，此时再有悬浮、点击，样式可以正常进行顺序覆盖。
5. 以下选择器分别是什么意思?
#header{
}
id选择器，id为header的标签都会被选择
.header{
}
类选择器，含有类header的标签都会被选择
.header .logo{
}
组合选择器---后代选择器，类header的后代中，含有类logo的，都会被选择
.header.mobile{
}
组合选择器---同时包含选择器，同时包含类header和类mobile的，都会被选择
.header p, .header h3{
}
组合选择器---类header下的标签p和类header下的标签h3会同时被选择
#header .nav>li{
}
组合选择器---id为header下的以nav为类名的所有li标签子元素同时被选择
#header a:hover{
}
id为header下的a的伪类元素hover被选择
#header .logo~p{
}
id为header下的、类为logo的p的所有同级邻居会被选择
#header input[type="text"]{
}
id为header下的、所有input元素的属性为text的标签被选择
6. 列出你知道的伪类选择器
E:link
E:hover
E:active
E:visited
E:focus
E:disable
E:selection
E:checked
E:enabled
E:root
E:nth-child(n)
E:last-child
E:first-child
E:first-of-type
7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
无空格
- div:first-child 匹配div父元素标签下的第一个子元素，不管有多少种类型，只匹配第一种类型的第一个元素
- div:first-of-type 匹配div父元素的每种元素类型的第一个子元素，有N种类型，就匹配N种类下的第一个子元素
有空格
- div :first-child 匹配div标签下的第一个子元素，不管有多少种类型，只匹配第一种类型的第一个元素
- div :first-of-type 匹配div标签下的每种元素类型的第一个子元素，有N种类型，就匹配N种类下的第一个子元素
8. 运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
输出样式：
output.png
>> .items1.first-child匹配其父元素div下的第一个子元素，只有aa生效
>> .item1.first-of-type匹配其父元素div下的每种类型的第一个元素，aa属于p标签，bb属于h3标签，标签不同，都可生效。
