• class和id的使用场景？

class为一类的元素命名，所有有共同特性的元素都可以用同一class进行分类；
id为特有的元素命名，在html中只能有唯一一个id，不能重复。

• css选择器常见的有几种?列出一些你所知道的伪类选择器。

1.基础选择器
* 通用元素选择器，匹配页面任何元素；
#id id选择器，匹配特定id的元素；
.class 类选择器，匹配class包含特定类的元素;
element 标签选择器。

2.组合选择器
A,B多元素选择器，用,分隔，同时匹配元素A或元素B；
A B后代选择器，用空格分隔，匹配A元素所有的后代（不只是子元素，子元素向下递归）元素B；
A>B 子代选择器，用>分隔，匹配A元素的所有直接子元素B；
A+B 相邻选择器，用+分隔，匹配A元素之后的相邻的同级元素B；
A~B 普通相邻选择器，匹配A元素之后的同级元素B（无论直接相邻与否）；
.class1.class2 匹配同时拥有.class1.class2两类的元素；
element#id 匹配拥有某id的某元素，例子：h#important，匹配拥有important这个id的h元素。

3.属性选择器
A[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div；
A[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div；
A[attr ~= value] 匹配所有具有属性attr且其中一个attr属性值等于value的元素；
A[attr ^= value] 匹配属性attr的值以value开头的元素；
A[attr $= value] 匹配属性attr的值以value结尾的元素；
A[attr *= value] 匹配属性attr的值包含value的元素。

4.伪类选择器
A:first-child 匹配作为长子（第一个子女）的元素E；
A:link 匹配所有未被点击的链接；
A:visited 匹配所有已被点击的链接；
A:active 匹配鼠标已经其上按下、还没有释放的E元素；
A:hover 匹配鼠标悬停其上的E元素；
A:focus 匹配获得当前焦点的E元素；
A:lang(c) 匹配lang属性等于c的E元素；
A:enabled 匹配表单中可用的元素；
A:disabled 匹配表单中禁用的元素；
A:checked 匹配表单中被选中的radio或checkbox元素；
A::selection 匹配用户当前选中的元素；
A:root 匹配文档的根元素，对于HTML文档，就是HTML元素；
A:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1；
A:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1；
A:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素；
A:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素；
A:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)；
A:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)；
A:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)；
A:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1) :nth-last-child(1)；
A:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1) :nth-last-of-type(1)；
A:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素；
A:not(selector) 匹配不符合当前选择器的任何元素。

5.伪元素选择器
A::first-line 匹配E元素内容的第一行；
A:first-letter 匹配E元素内容的第一个字母；
A::before 在E元素之前插入生成的内容；
A::after 在E元素之后插入生成的内容。

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

选择器遵循如下优先级（从高到低）：
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

对于复杂场景，有如下规则：
对于不一样的选择器，有不一样的权重，假设：
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
例子（都指向同一元素）：
A：#test p.class1 {...}a=0，b=1，c=1,d=1
B：#test .class1.class2 {...}a=0，b=1，c=2，d=0
对abcd项进行比较，数量多的优先级高，数量相同则比较下一项，可知B的优先级要高于A。

对于下面的重复样式，

div {color: #333;}
....
div {color: #666;}

则新的样式会覆盖旧的样式，div {color: #666;}会生效。

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

顺序如下：

a:link
a:visited
a:hover
a:active

基于样式覆盖：当链接没有任何操作时，a:link生效；当鼠标放在链接上时，a:hover生效，覆盖a:link；当点击链接时，a:active生效，覆盖a:hover和a:link；链接被访问以后，a:visited永久生效，覆盖a:link，同时a:hover，a:active也有效。这是唯一顺序。

• 一些选择器的含义

• 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{
  color: red;
}

A:nth-child(n)匹配其父元素的第n个子元素。item1的父元素是ct，ct的第一个元素就是aa，所以aa字体变为了红色；

.item1:first-of-type{
  background: blue;
}

A:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素；item的父元素是ct，ct下有两种类型的元素，p和h3，p的第一个元素是aa，h3的第一个元素是bb，所以aa和bb的背景变为了蓝色。