1.class 和 id 的使用场景?
id选择器：每个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
class选择器：每个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；
2.CSS选择器常见的有几种?
| 基础选择器 | 含义 |
|---|---|
| * | 通用元素选择器 |
| #id | id选择器 |
| .class | 类选择器 |
| element | 标签选择器 |
| 属性选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有属性为attr的元素 |
| E[attr=value] | 匹配属性attr为value的元素 |
| E[attr~=value] | 匹配所有属性为attr具有多个空格分隔，其中一个值为value的元素 |
| E[attr*=value] | 匹配属性attr的值包含value的元素 |
| 伪类选择器 | 含义 |
|---|---|
| E:first-child | E的父元素下的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下，还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素 |
| E:last-child | E的父元素下的最后一个子元素 |
| 组合选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用,分隔，同时匹配元素E或元素F |
| E F | 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F |
| E>F | 子元素选择器，用>分隔，匹配E元素的所有直接子元素 |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| E~F | 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
| .class1.class2 | id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素 |
| element#id | id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素 |
| 伪元素选择器 | 含义 |
|---|---|
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
| E::first-line | 匹配E元素内容的第一行 |
| E::first-letter | 匹配E元素内容的第一个字母 |
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
从高到低分别是:
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
9.浏览器自定义
复杂场景时，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link
a:visited
a:hover
a:active
原因：
- 当鼠标移动到a标签上，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover,这三个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后
- 当鼠标点击a标签，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover和a:active，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标点击a标签时变换颜色”的效果，需要将a:active置于a:link,a:visited,a:hover 之后。
5.以下选择器分别是什么意思?
| 选择器的样式 | 含义 |
|---|---|
| #header{ } | id选择器，匹配id="header"的元素 |
| .header{ } | 类选择器，匹配class="header"的元素 |
| .header .logo{ } | 后代选择器，匹配class="header"元素的后代元素中class="logo"的元素 |
| .header.mobile{ } | 类选择器，匹配class="header mobile"的元素 |
| .header p, .header h3{ } | 多元素选择器，匹配class="header"元素的后代p元素和后代h3元素 |
| #header .nav>li{ } | 多元素选择器，匹配id="header"元素的后代class="nav"元素的直接后代li元素 |
| #header a:hover{ } | 伪类选择器，匹配id="header"元素的后代a元素鼠标悬浮在其表面时的样式 |
6. 列出你知道的伪类选择器.
| 伪类选择器 | 含义 |
|---|---|
| E:first-child | E的父元素下的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下，还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素 |
| E:last-child | E的父元素下的最后一个子元素 |
7. div:first-child和div:first-of-type的作用和区别?
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。
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>
- .item1:first-child{
color: red;
}
这会让aa变成红色； - .item1:first-of-type{
background: blue;
}
这会让aa和bb都变成蓝色。
