1. class 和 id 的使用场景?
id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；
2. CSS选择器常见的有几种?
- 标签选择器
- 类选择器
- id选择器
- *通用选择器
- >直接后代选择器
- 空格 后代选择器
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
利用选择器权重，组合选择器可以计算权重比较大小
- 标签选择器 1
- 类选择器 10
- id选择器 100
- *通用选择器 0.1
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序是：(1) a:link(2)a:visited(3)a:hover(4)a:active
因为未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，a链接同时处于link和hover(或active)状态，由于它们特指度相同，
在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。
再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前
其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）
5. 以下选择器分别是什么意思?
#header{/*id为header*/
}
.header{/*class为header*/
}
.header .logo{/*class为header下的class为logo的元素*/
}
.header.mobile{/*class为header下的class为mobile的元素*/
}
.header p, .header h3{/*class为header下的class为p的元素和class为header下的class为h3的元素*/
}
#header .nav>li{/*id为header下的class为nav的直接后代li元素*/
}
#header a:hover{/*id为header下的a标签在悬浮状态下*/
}
#header .logo~p{/匹配id为header的元素的后代class为logo 的元素之后的同级p标签*/
}
#header input[type="text"]{/*id为header下的type属性为text的input元素
}
列出你知道的伪类选择器
::first-child
::hover
::link
::active
::visited
::focus
::enabled
::disableddiv:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
div:first-child选择属于其父元素的首个子元素的每个 <div> 元素
div:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
div :first-child 有空格选择div的后代第一个元素
div :first-of-type有空格选择div下使用同种标签的第一个元素运行如下代码，解析下输出样式的原因。
<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选择item1的父元素ct的第一个item1，所以aa是红色的
.item1:first-of-type选择item1的父元素ct的第一个p元素和第一个h3元素，所以aa和bb背景是蓝色的
