1. class 和 id 的使用场景?

class: 表示类，指定标签的类名，一个页面中可以多个标签复用。
id: 指定标签的id，在一个页面中，同一id只能出现一次，用来唯一标识一个元素。

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

基础选择器

组合选择器

属性选择器

伪元素选择器

伪类选择器

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

选择器的优先级从高到低：

• 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
• 作为style属性写在元素标签上的内联样式
• id选择器
• 类选择器、伪类选择器、属性选择器
• 标签选择器、伪元素选择器
• 通配符选择器
• 浏览器自定义

复杂场景：

行内样式 <div style="xxx"></div> ==> a，
ID 选择器 ==> b，
类、属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d

*             {}  /* a=0 b=0 c=0 d=1 -> 0,0,0,0 */
p             {}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover       {}  /* a=0 b=0 c=1 d=1 -> 0,0,1,1 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{}  /* a=0 b=0 c=1 d=2 -> 0,0,1,2 */
ul ol li.active   {}  /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p        {}  /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after  {}  /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
style=""          /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */

先比较a，a大的权重最大，再依次比较b，c，d

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

• link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。
• hover表示鼠标悬停时显示的颜色。
• active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。
• visited表示点击元素之后的状态。
• focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用。

伪类的顺序应为link，visited，hover，focus，active。 a:active必须要在a:focus，a:hover的后面，否则就会被覆盖。 a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

5. 以下选择器分别是什么意思?

#header{}    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标签，且其处于hover状态
#header .logo~p{}     id为header下的class为logo之后的所有同级p元素
#header input[type="text"]{}     id为header下的input元素，且其属性type为text

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元素下的同类元素的第一个子元素（不一定是直接子元素）

运行如下代码，解析下输出样式的原因。

<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{} 选择的是div下的第一个class为item1的元素。
.item1:first-of-type{} 选择的是div下同类标签的第一个class为item1的元素。