1.class 和 id 的使用场景?
当页面中某元素的样式并不独有，或与其他元素共用一个样式时，可以为该元素指定一个class值来使用类选择器。
当页面中某元素的样式为其独一无二占有时，可以为该元素指定一个id值来使用id选择器。
2.CSS选择器常见的有几种?
基础选择器
*通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
#idid选择器，匹配特定id的元素
.class类选择器，匹配class包含(不是等于)特定类的元素
element标签选择器组合选择器
E,F多元素选择器，用,分隔，同时匹配元素E或元素F
E F后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元 素、子元素向下递归）元素F
E>F子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
element#idid和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素属性选择器
E[attr]匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value]匹配属性attr值为value的元素，div[id=test],匹配id=test的div
E[attr ~= value]匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr ^= value]匹配属性attr的值以value开头的元素
E[attr $= value]匹配属性attr的值以value结尾的元素
E[attr *= value]匹配属性attr的值包含value的元素伪类选择器
E:first-child匹配作为长子（第一个子女）的元素E
E:link匹配所有未被点击的链接
E:visited匹配所有已被点击的链接
E:active匹配鼠标已经其上按下、还没有释放的E元素
E:hover匹配鼠标悬停其上的E元素
E:focus匹配获得当前焦点的E元素
E:lang(c)匹配lang属性等于c的E元素
E:enabled匹配表单中可用的元素
E:disabled匹配表单中禁用的元素
E:checked匹配表单中被选中的radio或checkbox元素
E::selection匹配用户当前选中的元素
E:root匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)伪元素选择器
E::first-line匹配E元素内容的第一行
E::first-letter匹配E元素内容的第一个字母
E::before在E元素之前插入生成的内容
E::after在E元素之后插入生成的内容
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
css优先级从高到低分别是
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景下选择器特殊性计算方法。
- 每个id选择器，特殊性增加0,1,0,0
- 每个类，属性，伪类选择器增加0,0,1,0
- 每个元素，伪元素选择器增加0,0,0,1
- 通配选择器特殊性为0,0,0,0
- 内联样式特殊性为1,0,0,0
举例：
p.aaa em.bbb{color: red;}
div#ccc p[class]{color: bule;}
前者有两个元素选择器，两个类选择器，故特殊性相加为0,0,2,2
后者有一个id选择器，两个元素选择器，一个属性选择器。故特殊性相加为0,1,1,2
后者优先级胜出。
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}
正确顺序如上。
由于四个选择器特殊性相同，所以只有位置不同会影响显示效果。
a:link表示链接未点击的状态，而点击后的状态想要正常显示，则点击后状态的样式优先级必须大于未点击状态，所以a:visited写在a:link之后。
同样的，鼠标悬停时的样式想要正常显示，则a:hover样式必须覆盖a:visited。而鼠标点击时的样式最为特殊，且优先级最高，故写在最后。
所以优先级从小到大依次为a:link，a:visited，a:hover，a:active。
5.以下选择器分别是什么意思?
#header{
}
选择id值为header的元素
.header{
}
选择类名为header的所有元素
.header .logo{
}
选择类名为header的所有元素的后代中类名的logo的所有元素
.header.mobile{
}
选择同时有类名header与mobile的所有元素
.header p, .header h3{
}
选择类名为header的所有元素后代中的<p>元素与<h3>元素。
#header .nav>li{
}
先选择出id为header的元素后代中所有类名为nav的元素。
这些类名为nav的元素中如果有直接子元素<li>，则选中它们。
#header a:hover{
}
选择id为header的元素后代中的所有<a>元素鼠标悬停时的状态
#header .logo~p{
}
先选择出id为header的元素后代中所有类名为logo的元素。
这些类名为logo的元素如果有同级的<p>元素，则选中它们。
#header input[type="text"]{
}
选择id为header的元素后代中的所有type值为text的<input>元素
6.列出你知道的伪类选择器
E:first-child 匹配作为长子（第一个子女）的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
7.div:first-child和div:first-of-type的作用和区别
div:first-child
表示选择父元素下的第一个子元素<div>。
div:first-of-type
表示父元素下使用同种标签的第一个<div>元素。
区别：
div:first-child只能选择长子（第一个子女）。
div:first-of-type则只需父元素中存在<div>子元素即可选中。
若父元素的第一个子元素是<div>，则两种方法都能选中。若<div>不是父元素的第一个子元素，如果为第二个或第三个子元素，则div:first-child会选不到该<div>元素。
8.运行如下代码，解析下输出样式的原因。
<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的子元素。代码中<div>下的第一个类名为item1的子元素为p元素。所以p元素中的字符aa获得样式显示为红色。
.item1:first-of-type表示选择父元素下使用同种标签的所有第一个子元素，且这些子元素要有类名item1。p元素只有一个，所以直接被选中。两个h3则选择第一个。所以字符aa与bb获得样式显示蓝的背景。
