1. class 和 id 的使用场景?
- class：类选择器，不限于只针对单个元素使用，若有若干个元素要使用相同样式可以定义相同class名。
- id：ID选择器，每个标签有且只有一个id，且不能和其他标签重名，所以id选择器只能控制单个元素。
2. CSS选择器常见的有几种?
| 选择器 |
含义 |
| element |
标签选择器 |
| * |
通配符选择器 |
| .class |
类选择器 |
| #id |
ID选择器 |
| 选择器,选择器 |
多元素选择器 |
| 选择器 选择器 |
后代选择器 |
| E[attr]，E[attr=value] |
属性选择器 |
| E: |
伪类选择器 |
| E:before，E:after |
伪元素选择器 |
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
| 优先级 |
选择器 |
| 1 |
!important：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 |
| 2 |
内联样式：style="..." |
| 3 |
ID选择器：#id |
| 4 |
类选择器：.class |
| 5 |
伪类选择器：E: |
| 6 |
属性选择器 |
| 7 |
标签选择器：div |
| 8 |
通配符选择器：* |
| 9 |
浏览器自定义 |
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. 以下选择器分别是什么意思?
| 选择器 |
含义 |
| #header{} |
Id=header的元素 |
| .header{} |
class=header的元素 |
| .header .logo{} |
header元素的子元素中类为logo的元素 |
| .header.mobile{} |
class包含header和mobile的元素 |
| .header p, .header h3{} |
匹配两个类型的元素，类型1是header类的后代p标签，类型2是header类的后代h3标签 |
| #header .nav>li{} |
id为header的子元素中，class为nav的直接子元素为li的元素 |
| #header a:hover{} |
id为header的子元素a在hover状态（鼠标悬停其上）下的样式 |
| #header .logo~p{} |
id为header的子元素中，类名为logo的元素之后的同级元素中，的p标签 |
| #header input[type="text"]{} |
id为header的子元素中，input的type属性为"text"的元素集合 |
6. 列出你知道的伪类选择器
| 伪类选择器 |
含义 |
| E:first-child |
元素E的第一个子元素 |
| E:nth-child(n) |
元素E的第n个子元素 |
| E:last-child |
元素E的最后一个子元素 |
| E:enabled和E:disabled |
元素E的状态为可用/不可用 |
| E:checked和E:selection |
元素E的状态为单选框选中/复选框选中 |
| a:link |
未被点击的链接 |
| a:visited |
已被点击的链接 |
| a:hover |
鼠标悬停其上的链接 |
| a:active |
鼠标已经按下，但没有释放的链接 |
7. 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下的不同标签元素的第一个元素 |
8. 运行如下代码，解析下输出样式的原因
<style>
.item1:first-child{
color: red; /*指定父元素中第一个类名为item1的元素的字体颜色为红色*/
}
.item1:first-of-type{
background: blue; /*父元素中每一类元素的第一个类名为item1的元素的背景色为蓝色*/
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div> /*aa，bb一行显示的是蓝色，ccc一行不显示颜色*/
（mission7）
