1. class 和 id 的使用场景

• class，指定标签的类名，是CSS选择器其中应用最多的，一般用来定义部分有共同特性的元素的样式
• id，指定标签唯一的标识，具有唯一性，一般用于外部区块划分

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

基础选择器

selector	description
*	通用元素选择器，匹配页面所有元素
#id	id选择器，在id前面加#,匹配中具有特定id的元素
.class	类选择器，匹配页面中具有指定类的元素
element	元素选择器，匹配页面中所有的指定元素

组合选择器（本文以下的E，F可以是各种选择器）

selector	description
E,F	多元素选择器，中间用逗号分隔，同时匹配E元素和F元素
E F	后代选择器，中间用空格分隔，匹配E元素的所有的后代元素F（包括嵌套的F元素）
E>F	子元素选择器，中间用大于号分隔，匹配E元素的所有的直接后代元素F（不包括嵌套的F元素）
E+F	相邻兄弟选择器，中间用加号分隔，匹配E元素师后面直接相邻的同级元素F
E~F	通用相邻选择器（弟弟选择器），中间用~分隔，匹配E元素后面所有的的同级F元素（无论是否直接相邻）
.class1.class2或#id.class1	id和class选择器连写的时候无分隔符，匹配同时符合这两个选择器的元素

属性选择器（唯一一组用[]进行表示的选择器）

selector	description
[attr]	匹配页面中所有具有attr属性的元素
E[attr]	匹配页面中所有具有attr属性的E元素(E可有可无)
E[attr = value]	匹配页面中所有attr属性值为value的E元素
E[attr ~= value]	匹配页面中附带attr属性，且其中一个属性值为value的E元素
E[attr ^= value]	匹配页面中附带attr属性，且属性值以value开头的E元素
E[attr ^= value]	匹配页面中附带attr属性，且属性值以value结尾的E元素
E[attr *= value]	匹配页面中附带attr属性，且属性值中包含value的E元素
E[attr1][attr2]	匹配页面中既附带attr1属性，同时也附带attr2属性的E元素

伪类选择器

selector	description
E:link	匹配页面中所有未被点击的链接
E:visited	匹配页面中所有已被点击的链接
E:hover	匹配鼠标指针位于其上的E元素
E:active	匹配鼠标已经在其上按下但还未释放的E元素
E:foucs	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enable	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中已选中的radio或checkbox元素
E:selection	匹配用户当前选中的元素
E:root	匹配文档的根元素（对于HTML文档，就是html元素）
E:first-child	匹配E的父元素的首个子元素，如果第一个子元素是E元素则匹配，否则不匹配
E:last-child	匹配E的父元素的最后一个子元素，如果最后一个子元素是E元素则匹配，否则不匹配
E:nth-child(n)	匹配E的父元素的第n个子元素，如果是E元素则匹配，否则不匹配
E:nth-last-child(n)	匹配E的父元素的倒数第n个子元素，如果是E元素则匹配，否则不匹配
E:first-of-type	匹配E的父元素下第一个为E的子元素
E:last-of-type	匹配E的父元素下倒数顺序下第一个为E的子元素
E:nth-of-type	匹配E的父元素下第n个为E的子元素
E:nth-last-of-type	匹配E的父元素下倒数顺序下第n个为E的子元素

伪元素选择器

selector	description
E::first-line	匹配E元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母
E::before	在E元素之前插入生成的内容（插入内容用"content"属性表示）
E::after	在E元素之前插入生成的内容（插入内容用"content"属性表示）

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

• 多重样式：如果内联样式、内部样式和外部样式同时应用于一个同一个元素，其优先级大小为：
  内联样式 > 内部样式 > 外部样式
  但是内部样式>外部样式有一个前提：内部样式的位置一定在外部样式的后面。如：

<link rel="stylesheet" href="style.css">
<style>
    .item1{
        color: red;
    }
</style>

（实际开发中也是这么写的）。

其实总结来说，就是“就近原则”（离被设置元素越近优先级别越高）。
例外：！important，在属性值后面加！important会覆盖该页面任何位置定义的样式，其优先级最高（但不推荐使用）

• 在比较复杂的情况下须比较他们的权重大小

权重大小（由高到低）	选择器类型
a	内联样式
b	id选择器
c	类选择器，伪类选择器，属性选择器
d	标签选择器，伪元素选择器

以a，b，c，d 的数量大小作为比较，当a相等时，便比较b的大小，依此类推，权重大的优先级高

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

正确顺序：a:link, a:visited, a:hover, a:active
原因：一个链接可能同时处于多种状态，根据浏览器解析CSS时遵循的“就近原则”

举例来说：
我想让未访问链接颜色为蓝色，活动链接为绿色，已访问链接为红色：
第一种情况：我定义的顺序是a:visited、a:hover、a:link，这时会发现：把鼠标放到未访问过的蓝色链接上时，它并不变成绿色，只有放在已访问的红色链接上，链接才会变绿。
第二种情况：我把CSS定义顺序调整为：a:link、a:visited、a:hover，这时，无论你鼠标经过的链接有没有被访问过，它都会变成绿色啦。
这是因为，一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性，在第一种情况下，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。
在第二种情况，无论链接有没有被访问过，它首先要检查是否符合a:hover的标准（即是否有鼠标经过它），满足，则变成绿色，不满足，则继续向上查找，一直找到满足条件的定义为止。

一句话：在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。
这样，浏览器在显示元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。

记忆方法：“爱恨原则”（LoVe/HAte）

5. 以下选择器分别是什么意思?

CSS选择器.png

6. 列出你知道的伪类选择器

参考第二问选择器的种类中的伪类选择器表格

7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

selector	description
div:first-child	伪类选择器，匹配div的父元素的首个子元素，如果第一个子元素是div元素则匹配，否则不匹配（选择位置为第一个子元素的div元素）
div:first-of-type	伪类选择器，匹配div的父元素下第一个为div的子元素（选择子元素中的第一个div元素）
div :first-child	后代选择器，匹配div元素下的第一个子元素（选择div的子元素）
div :first-of-type	后代选择器，匹配div元素下使用同种标签的第一个子元素（选择div的子元素）

8. 运行如下代码，解析下输出样式的原因

示例.png 样式.png

• .item1:first-child{color: red;} 因为3个class="item1"的元素的父元素都是div，使div元素下的第一个子元素且具有class="item1"即p的颜色为红色。
• .item1:first-of-type{background: blue;} 使div元素的子元素中具有class="item1"的，同种类型标签的第一个元素即p和第一个h3的背景为蓝色。