CSS选择器

1.class 和 id 的使用场景?
class选择器优先级低于id选择器，通常在需要设置很多元素具有相同的样式时，给它们设置同样的class属性值来使用；id选择器优先级较高，用于需要给一个标签设置独立的样式时使用。

2.常用的CSS选择器：
基础选择器包括：通用选择器、id选择器、类选择器和标签选择器。
组合选择器包括：多元素选择器、后代选择器、子元素选择器、直接相邻选择器、普通相邻选择器等
属性选择器包括：E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
……
伪类选择器包括：E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
……
伪元素选择器包括：E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？`
优先级由高到低排列为：
①在属性后用！important的优先级最高
②作为style属性写在元素标签上的内联样式
③id选择器
④类选择器
⑤伪类选择器
⑥属性选择器
⑦标签选择器
⑧通配符选择器
⑨浏览器自定义
在复杂场景下，记行内样式为a；ID 选择器为b；类、属性选择器和伪类选择器为c；标签选择器、伪元素为d。依次比较a、b、c、d的个数来判断优先级。当优先级相同时，写在后面的样式会覆盖前面的样式。

4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？
由于写在后面的样式会覆盖前面的样式，所以需要对这四种状态进行逻辑上的分析，特殊性越高的状态就越应该放在后面。link和visited状态相互矛盾，且特殊级别相同，所以这两种状态的顺序谁在前谁在后都可以。而在link和visited状态下，都可以触发hover和active状态，在hover状态下又可以触发active状态，所以这四个选择器的顺序应该是：a:link, a:visited，a:hover, a:active。

5.下面选择器的含义：

#header{                                /* id选择器，选择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标签在鼠标停留在上面指定样式*/
}
#header .logo~p{                 /*选择id为header的后代中class为logo的元素之后的同级元素中的p标签*/
}
#header input[type="text"]{      /*选择*id为header的后代的input标签中，type属性值为"text"的元素*/
}

6.常用的伪类选择器
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素

div:first-child和div:first-of-type的作用和区别
div:first-child 匹配父元素中第一个子元素且类型为divdiv:first-of-type 匹配父元素的子元素中所有div元素中的第一个

7.如下代码输出的样式？
<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;}匹配父元素的第一个子元素且class值为item1的元素，即下面的p标签中的aa，使其样式为红色。.item1:first-of-type{background: blue;}匹配父元素的子元素中每一类的第一个class值为item的元素，即p标签中的aa和第一个h3标签中的bb，使其背景为蓝色。