前端面试常备09：你应该知道的CSS选择器知识-一一网

选择器是CSS规则的一部分, 且位于CSS声明块的前面

选择器可以按类别简单的分为:

简单选择器(Simple Selectors): 通过元素类型, class, id匹配一个或多个元素
属性选择器(Attribute selectors): 通过属性 / 属性值匹配一个或多个元素。
伪类(Pseudo-classes): 匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM 树中一父节点的第一个子节点。
伪元素(Pseudo-elements): 匹配处于相关的确定位置的一个或多个元素, 例如每个段落的第一个字, 或者某个元素之前生成的内容.
组合器(Combinators): 以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。
多用选择器(Multiple Selectors): 以逗号分开的多个选择器放在一个CSS规则下

简单选择

元素选择器: p, div, span 等
类选择器(.): .name, .header 等
ID选择器(#): #id, #root等
通用选择器(*):: *

组合器

A,B: 匹配满足A或B的任意元素.
A B: 匹配B是A的后代节点的任意元素
A > B: 匹配B是A的直接子节点的任意元素
A + B: 匹配B是A的下一个兄弟节点的任意元素
A ~ B: 匹配B是A之后的兄弟节点的任意元素

属性选择器

属性选择器根据元素的属性和属性值来匹配元素. 通用语法是[*]. 根据匹配属性值的方式分为:

存在和值属性选择器
子串值属性选择器

存在和值(Presence and Value)属性选择器

这些属性选择器会尝试匹配精确的属性值:

[attr]: 选择包含attr属性的所有元素, 不论值为何
[attr=val]: 选择包含attr为val值的所有元素
[arrt~=val]: 选择存在attr属性且值包含(以空格间隔出多个值)val的所有元素, 比如class类

子串(Substring value)属性选择器

这种情况的属性选择器也被称为”伪正则选择器”, 因为他们提供类似regular expression的灵活匹配方式:

[attr|=val]: 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。
[attr^=val]: 选择attr属性的值以val开头（包括val）的元素。
[attr$=val]: 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val]: 选择attr属性的值中包含字符串val的元素。

选择器优先级

优先级规则 1: 最近的祖先样式比其他祖先样式优先级高(就近原则)
优先级规则 2: “直接样式”比”祖先样式”优先级高
优先级规则 3: 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
优先级规则 4: ：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照”就近原则”来判断。
优先级规则 5:属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级

权重计算需要注意的一点细节
在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。

这种说法其实是有一点小问题。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。

错误的原因是：选择器的权值不能进位。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100，你可以理解为 99.99，所以最终应用后者样式。

伪类和伪元素

伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

关于单冒号和双冒号:

伪类

状态

:link: 选择未访问的链接
:visited: 选择已访问的链接
:hover: 选择鼠标指针浮动在其上的元素
:active: 选择活动的链接
:focus: 选择获取焦点的输入字段

结构化

:not: 用于匹配不符合参数选择器的元素
:first-child: 匹配第一个子元素
:last-child: 匹配最后一个子元素
:first-of-type:匹配属于其复原的某个特定类型的子元素的每个元素
:last-of-type:匹配元素的最后一个子元素。
:nth-child: 根据元素的位置匹配一个或多个元素, 可以接受 an+b 的参数
:nth-last-child: 与:nth-child类似, 不同之处在于它是从最后一个子元素开始计数
:nth-of-type: 与:nth-child相似, 不同之处在于只匹配特定类型的元素
:nth-last-type: 与 nth-of-type 相似，不同之处在于它是从最后一个子元素开始计数的。
:only-child: 当元素是其父元素中唯一一个子元素时，:only-child 匹配该元素。
:only-of-type:当元素是其父元素中唯一一个特定类型的子元素时，:only-child 匹配该元素。
:target: 当 URL 带有锚名称，指向文档内某个具体的元素时，:target 匹配该元素。简单的说, 就是锚点激活的状态

表单

:checked: 被选中的 input 标签(radio/checkbox)
:default: 默认选中的元素
:disabled: 禁用的表单元素
:empty: 没有子元素的元素(子元素包含文本节点, HTML 元素或者一个空格)
:enabled:没有设置 disabled 属性的表单元素
:in-range:匹配在指定区域内元素
:out-of-range:匹配不在指定区域内的元素
:indeterminate:当某组中的单选框或复选框还没有选取状态时，:indeterminate 匹配该组中所有的单选框或复选框。
:valid:条件验证正确的表单元素。
:invalid:条件验证错误的表单元素
:optional:匹配具有 optional 属性点的表单元素
:required:与:optional 相反匹配设置了required属性的表单元素。
:read-only:匹配设置了只读属性的元素，表单元素可以通过设置“readonly” 属性来定义元素只读
:read-write:匹配处于编辑状态的元素。
:scope(处于试验阶段):匹配处于 style 作用域下的元素。当 style 没有设置 scope 属性时，style 内的样式会对整个 html 起作用