1. class 和 id 的使用场景?

id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

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

1. 标签选择器
2. 类选择器
3. id选择器
4. *通用选择器
5. >直接后代选择器
6. 空格 后代选择器

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

利用选择器权重，组合选择器可以计算权重比较大小

1. 标签选择器 1
2. 类选择器 10
3. id选择器 100
4. *通用选择器 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
  ::disabled

• div: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背景是蓝色的