class 和 id 的使用场景？

class定位到页面上的某一类元素。id定位到页面上的某一元素。
id是唯一的，如果要对某个元素做特定的操作可以选择ID。在css操作中，如果很多标签拥有相同的样式，可以把样式放在一个类中，在这些标签中引用此类。

CSS选择器常见的有几种?

1.基础选择器

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

2.属性选择器

1、E[attr] 表示存在attr属性即可；
2、E[attr=val] 表示属性值完全等于val
3、E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的
4、E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以“-”分隔的
5、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置
6、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
7、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置

3.伪类选择器

E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；
E:nth-of-type(n) 第n个同种标签子元素，计算方法只是E元素，会忽略其子元素的存在；
E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。
E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。
n遵循线性变化，其取值1、2、3、4、...
关于n的取值范围：
1、当n做为一个独立值时，n取值为n>=1，例如nth-child(n)
2、当n做一个系数时，n取值为n>=0者n<0，例如nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1；
E:only-child 表示当前以E确定的父元素，除E之外并无其它子元素（独生子）；
E:only-of-type表示当前以E确定的父元素， 除E之外不能包含其它和E同类型的子元素；
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
E:empty 选中没有任何子节点的E元素；
E:link匹配所有未被点击的链接；
E:visited匹配所有已被点击的链接；
E:active匹配鼠标已经在其上按下，但是还没释放的E元素。
E:hover匹配鼠标悬停其上的E元素。
E:focus匹配当前获得焦点的E元素。
E:lang(c)匹配lang属性等于c的E元素。
E:enabled匹配表单中可用的E元素。
E:disabled匹配表单中禁用的E元素。
E:checked匹配表单中被选中的radio或者checkbox元素。
E:selection匹配用户当前选中的元素。

4.伪元素选择器

E::first-line 匹配E元素内容的第一行。
E::first-letter匹配E元素内容的第一个字母。
E::在E元素之前插入生成的内容。
E::在E元素之后插入生成的内容。

5.组合选择器

E,F多元素选择器。同时匹配E和F元素。
E F后代选择器，用空格分离，匹配E元素所有的后代F元素。
E>F子元素选择器，用>分隔，匹配E元素的所有直接子元素。
E+F直接相邻选择器，匹配E元素之后的相邻同级元素F.
E~F普通相邻选择器，匹配E元素之后的同级元素F（无论直接相邻与否）。

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

css优先级
！important>style>id>class>标签
　　CSS优先级：是由四个级别和各级别的出现次数决定的。
　　四个级别分别为：行内样式style、ID选择器、class选择器、标签选择器。
　　优先级的算法：
　　每个规则对应一个初始"四位数"：0、0、0、0
　　若是 style，则加1、0、0、0
　　若是 ID选择器，则加0、1、0、0
　　若是 类选择器/属性选择器/伪类选择器，则分别加0、0、1、0
　　若是 元素选择器/伪元素选择器，则分别加0、0、0、1
　　算法：将每条规则中，选择器对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
　　注意：
　　①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;
　　②、优先级相同时，则采用就近原则，选择最后出现的样式;
　　③、继承得来的属性，其优先级最低;
　　!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
例如：

图片.png

结果：

图片.png

不进位

图片.png

如果权重一样，那么以后出现的为准：

图片.png

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

图片.png

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

正确显示顺：a:link,a:visited,a:hover,a:active
因为链接被点击之后 a:visited所声明的样式就会生效，当把鼠标放到链接上或者当鼠标指针在链接上并且按下鼠标键的时候a:hover或者a:active所声明的样式会被a:visited所覆盖。所以为了正确的显示链接样式效果，只要a:visited位于a:hover和a:active之前就可以实现正确的效果。

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

图片.png

列出你知道的伪类选择器

:root              选择文档的根元素。
p:empty            选择没有子元素的每个 <p> 元素（包括文本节点）。
#news:target       选择当前活动的 #news 元素。
:not(p)            选择非 <p> 元素的每个元素。

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

div:first-child 匹配相对于父级做参考，“所有”子元素的第一个子元素。

图片.png

div :first-child（有空格）

图片.png

结论：抓狂了~越测试越觉得之前的理解是错的w(ﾟДﾟ)w
div:first-child选择器意味着
1.这是个div元素
2.这是父标签的第一个孩子元素
要同时满足这两个条件。

图片.png

图片.png

div :first-child选择器意味着：
1.div是父标签 ，
2.选中div中的第一个子元素。

div:first-of-type 匹配item父级下的元素，的第一个div子元素。（无空格）

图片.png

换成p标签也是选中p标签的第一个元素。

图片.png

div :first-of-type 匹配div父级下，"同种标签"第一个子元素。（有空格）

图片.png

换成div :first-of-type

图片.png

结论：
div:first-of-type选择器意味着：
1.这个标签是div。
2.是父标签的第一个div标签，注意不是第一个标签。

图片.png

div :first-of-type意味着：
1.父元素是div.
2.把div下的同种标签的第一个都选上。

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

图片.png

图片.png

结果：

图片.png