CSS选择器的优先级是如何工作的呢？

我们在写CSS的时候需要注意，在()中有些选择器会高于其他选择器。 我们在最后编写的选择器不一定会覆盖我们之前在同一元素上编写的样式。 那么如何计算给定选择器的优先级呢？ 如果您认为优先级表示为用逗号分隔的四个数字，则非常简单，例如：1, 1, 1, 1 或 0, 2, 0, 1

第一个数字 (a) 通常为 0，除非标签上使用了 style 属性；

第二个数字 (b) 是该选择器上 id 数量的总和；

第三个数字 (c) 是该选择器上使用的其他属性选择器和伪类的总数。 这包括类 (.) 和属性选择器（例如 li[id=red]）；

第四个数字（d）计数元素（如table、p、div等）和伪元素（如：第一行等）；

通用选择器（*）优先级为0；

如果两个选择器具有相同的优先级，则样式表中较晚的选择器生效。

让我们看几个例子，这样可能更容易理解：

# h2 — 0, 1, 0, 1

h2.标题 — 0, 0, 1, 1

h2 + p — 0, 0, 0, 2

# p:第一行 — 0, 1, 0, 2

在下面的示例中，第一个将起作用，因为它的优先级高于第二个：

# p#first { 颜色：红色； } — 0, 2, 0, 1

# p:第一行 { 颜色: 蓝色; } — 0, 1, 0, 2

至少对优先级如何工作有一个基本的了解很重要，但是像按选择器优先级列出所有 CSS 选择器对这样的工具让我们知道在检查给定元素时要对它进行哪个选择拥有可用的选择器很有用，可以让您轻松查看哪个选择器应用于元素。

CSS3 选择器类别

CSS3选择器分类如下所示：

选择器语法

1. 基本选择器语法

选择器

类型

功能说明

通配符选择器

选择文档中的所有 HTML 元素

元素选择器

选择指定类型的 HTML 元素

＃ID

ID选择器

选择ID属性值为“id”的任何类型的元素

。班级

类选择器

选择具有指定类属性值“class”的任意类型的任意多个元素

,

组选择器

合并每个选择器匹配的元素集

2. 层次选择器语法

选择器

类型

功能说明

EF

后代选择器（包含选择器）

选择包含在匹配 E 元素中的匹配 F 元素

E>F

子选择器

选择作为匹配 F 元素所匹配的 E 元素的子元素的匹配 F 元素。

E+F

邻居选择器

选择紧随匹配 E 元素之后的匹配 F 元素

英~法

通用选择器

选择匹配 F 元素之后且位于匹配 E 元素之后的所有匹配 F 元素

3.动态伪类选择器语法

选择器

类型

功能说明

E：链接

链接伪类选择器

选择匹配的E元素，匹配元素有定义的超链接且未被访问过。常用于链接绘制点

乙：

链接伪类选择器

选择已定义且已访问过超链接的匹配 E 元素。常用于链接绘制点

乙：

用户行为选择器

选择匹配的E元素并激活匹配的元素。常用于链接笔划和按钮

E：悬停

用户行为选择器

匹配的E元素被选中，用户鼠标停留在E元素上。IE6及以下浏览器仅支持a:hover

E：焦点

用户行为选择器

匹配的E元素被选中，匹配的元素获得焦点

4.目标伪类选择器

选择器

功能说明

乙：

选择与 E 匹配并由相关 URL 指向的所有元素

5. UI元素状态伪类选择器语法

选择器

类型

功能说明

乙：

选择状态伪类选择器

匹配选定的复选按钮或单选按钮表单元素

乙：

启用状态伪类选择器

匹配所有启用的表单元素

乙：

不可用状态伪类选择器

匹配所有禁用的表单元素

6. 使用结构体伪类选择器的语法

选择器

功能说明

E：第一个孩子

作为父元素的第一个子元素的元素 E。相当于 E:nth-child(1)

E：最后一个孩子

父元素的最后一个子元素 E 等价于 E:nth-last-child(1)

E：根

选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，选择器匹配与html类型选择器相同的内容。

EF:第n个孩子(n)

选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)，关键字(偶数，奇数)，或者公式(2n+1)，n的起始值为1 ，不是 0。

EF:第n个最后一个子节点(n)

选择父元素E下数第n个子元素F。该选择器的计算顺序与E:nth-child(n)选择器相反，但使用方法是一样的。 其中：nth-​​last-child(1)总是匹配最后一个元素，相当于last-child。

E:第n个类型(n)

选择父元素中具有指定类型的第 n 个 E 元素

E:第n个最后一个类型(n)

选择父元素内具有指定类型的从底部开始的第 n 个 E 元素

E：第一类

选择父元素中指定类型的第一个 E 元素，相当于 E:nth-of-type(1)

E：最后一个类型

选择父元素中指定类型的最后一个 E 元素，相当于 E:nth-last-of-type(1)

E：独生子女

选择父元素只包含一个子元素，子元素匹配E元素

E：仅类型

选择父元素只包含一个同类型的子元素，子元素匹配E元素

E：空

选择没有子元素且不包含任何文本节点的元素

注：（1）、“ul>li:nth-child(3)”并不表示对列表的ul元素中第三个子元素li的确定选择，只是表示第三个li元素之前没有其他元素在列表中 ul。 元素，命题有意义，否则列表中第三个li元素的样式不会改变。

(2)、:nth-child(n)中的参数只能是n，不能用其他字母代替。

(3), :nth-child(odd) 选择奇数项，但使用 :nth-last-child(odd) 选择偶数项。

7. 否定伪类选择器

选择器

功能说明

E：不(F)

匹配除元素 F 之外的所有 E 元素

8. 属性选择器语法

选择器功能说明

[]

用于选择具有指定属性的元素。

[=值]

用于选择具有指定属性和值的元素。

[~=值]

用于选择属性值包含指定词汇的元素。

[|=值]

用于选择属性值以指定值开头的元素，该值必须是整个单词。

[^=值]

匹配属性值以指定值开头的每个元素。

[$=值]

匹配属性值以指定值结尾的每个元素。

[*=值]

匹配属性值包含指定值的每个元素。

注意：在示例中，a[class="links"]{...} 找不到匹配元素，只有 a[class="links item"]{...} 匹配。