1.class 和 id 的使用场景?
多个标签可以使用同一个class，一个id只能对应一个标签
2.CSS选择器常见的有几种?
基础选择器
| * | #id | .class | element |
|---|---|---|---|
| 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用） | 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用） | 类选择器，匹配class包含(不是等于)特定类的元素 | 标签选择器 |
组合选择器
E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2 id和class选择器，和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
element#id id和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:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素
n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even
伪元素选择器
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
选择器优先级
如果多条规则作用于同一个元素上，且定义的相同属性的不同值，比如
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
浏览器自定义 < 通配符选择器(*) < 标签选择器 < 属性选择器 < 伪类选择器 < 类选择器 < id选择器 < 内联样式(行内样式) < 在属性后面使用 !important
复杂场景
行内样式 ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
爱恨原则（LoVe/HAte），即四种伪类的首字母:LVHA。
a:link a:visited , a:hover , a:active,
一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性，浏览器会先满足最近的，即最后的。
举例：
如果将a:visited放在最后，当链接被访问过以后，那么a:active和a:hover的颜色设置就不会显示出来，因为已经满足了visited的条件。其实即使链接没有被访问，a:active和a:hover的颜色也不会显示出来。
总结：将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。这样，浏览器在显示元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。当然，如果故意打乱顺序，也会造成一些特殊的效果。比如，可以为链接制造出下划线颜色与文字颜色的差异。
未点击链接前，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两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）
转自CSS选择器觉得这个解释的很清楚
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"的标签设置样式
6.列出你知道的伪类选择器
经常使用的几个：
E:first-child 匹配作为长子（第一个子女）的元素E
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
7.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
- div:first-child
与div同级的元素中的第一个元素，且这个元素为div - div:first-of-type
div父元素中第一个使用div的标签 - div :first-child
div元素下的第一个子元素 - div :first-of-type
div元素下所有的同类型的第一个元素
8.运行如下代码，解析下输出样式的原因
<style>
.item1:first-child{
color: red;
} id为item1的父元素下的第一个子元素，即p，因此aa变红
.item1:first-of-type{
background: blue;
} id为item1的父元素下每种类型的第一个子元素，即第一个p和第一个h3，因此aa，bb背景变蓝
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
