CSS选择器

1.class 和 id 的使用场景?

id是设置标签的标识。用于定义一个元素的独特的样式。一个页面中可以有很多个id，但每个id只能定义一个元素。
class是设置标签的类，用于指定元素属于何种样式的类。一个页面中可以有很多个class，并且每一个class都可以指定很多个元素。

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

2-1.基础选择器

通用元素选择器 *
id选择器 #id
class选择器 .class
标签选择器 element

2-2.组合选择器

E,F 多元素选择器
用于同时选中E和F
E F 后代选择器
用于选择E的所有后代F
E>F 子元素选择器
用于选择E的所有直接后代F
E+F 直接相邻选择器
用于选择E之后相邻的同级F
E~F 普通相邻选择器
用于选择E之后的同级F
.class1.class2以及element#id
id和class选择器和选择器连写的时候不需要分隔符

2-3.属性选择器

2-4.伪类选择器

E:first-child
匹配元素E的第一个子元素。
E:enabled 以及 E:disabled
匹配表单中可用/禁用的元素。
E:nth-child(n)
匹配其父元素的第n个子元素，第一个编号为1。
E:nth-last-child(n)
匹配其父元素的倒数第n个子元素，第一个编号为1。
E:nth-of-type(n)
与:nth-child()作用类似，但是仅匹配使用同种标签的元素

2-5.伪元素选择器

E::before
在E元素之前插入生成的内容
E::after
在E元素之后插入生成的内容

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

3-1.选择器的优先级是怎样的？
从高到低：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

3-2.对于复杂场景如何计算优先级？
划分成四类，根据abcd的数量来计算优先级。优先选择包含a数量最多的那个，若a数量相同，则选择b数量最多，以此类推。

行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d

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

顺序是a:link,a:visited, a:hover, a:active。
因为a:link是一直生效的，而a:visited是在链接被访问后一直生效的，若这两个放在后面，则会覆盖a:hover, a:active的效果。

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

Paste_Image.png

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

E:first-child
匹配元素E的第一个子元素。
E:enabled 以及 E:disabled
匹配表单中可用/禁用的元素。
E:nth-child(n)
匹配其父元素的第n个子元素，第一个编号为1。
E:nth-last-child(n)
匹配其父元素的倒数第n个子元素，第一个编号为1。
E:nth-of-type(n)
与:nth-child()作用类似，但是仅匹配使用同种标签的元素

7.div:first-child和div:first-of-type的作用和区别

div:first-child是指父元素下的第一个子元素，且必须为div。
div:first-of-type是指匹配父元素下div中同种标签的第一个元素。

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