[快速入门前端 18] CSS 选择器的权重

选择器的优先顺序

当我们使用多个选择器选中同个元素，并赋予某个属性不同值时，就会产生样式冲突。举例来说，当我们在 A 选择器将元素的颜色设为红色，又用 B 选择器将同个元素的颜色设为绿色，那该元素的文字到底会是什么颜色呢？
其实选择器的优先级又分很多个层面，若以 CSS 撰写位置来看的话：行内样式 > 内部嵌入 > 外部引入，而在同个位置同种选择器冲突时，后面的样式会将前面的样式覆盖过去。

範例：(CSS 冲突)
下面两段选择器都对 p 元素作用，且 color 属性值冲突，后面的样式会将前面的样式设定覆盖。

p {    color: red; /* 有冲突，被后面覆盖，p 内文字最终呈现黄色 */    font-size: 30; /* 无冲突，不影响 */}p {    color: yellow; /* 有冲突，覆盖掉前面的设定 */}

但在选择器的写法不同时，优先度又会是如何呢？
简单来说，选择器的优先级大概是

行内样式 > ID 选择器 > Class 类别选择器 > 元素选择器 > 通配符选择器

在 CSS 规则中，选择器优先度较高的不会被优先度低的覆盖。

範例：
在下面程式中，#myd 和 .color 都指向同一个元素 p，而 #myId 写在前面、.color 写在后面，但因为 ID 选择器优先度较高不会被优先度低的选择器覆盖，所以文字最终呈现红色。

#myId {    color: red;}.color {    color: yellow;}

<p id="myId" class="color">我是红色的</p>

其实在 CSS 样式中还有一个 BUG，他可以打败所有选择器和写法，只要有他在就一定是优先度最高的，那就是 !important。故名思义 !important 的意思就是将某个选择器中的某个属性值设为最高权重，而他的用法为 属性名: 属性值 !important;，直接以空格连接加在属性值后面。
注意，这边 important 增加的是单个属性的权重，而不是整个选择器的权重，指对该属性有用。

範例：(!important)
!important 会将该属性设为最高级，不论先后顺序和选择器优先度为何都不会被覆盖。

p {    color: red !important; /* 有冲突，但我有 importan，不会被覆盖 */    font-size: 30; /* 有冲突，被覆盖 */    background-color: blud; /* 无冲突，不影响 */}p {    color: yellow; /* 有冲突，但他有 importan，所以我输了*/    font-size: 40; /* 有冲突，覆盖掉前面的 */}

总结

CSS 样式优先度为

!important > 行内样式 > ID 选择器 > Class 类别选择器 > 元素选择器 > 通配符选择器 > 若选择器相同则后面覆盖前面

如何计算权重

前面讲了这么多需要死记硬背的规则，可能会有人好奇权重到底是如何计算的呢？其实很简单，只要将选择器分类为三种并进行比较就好啦。

权重计算

在权重计算中，我们会将选择器分为三种类型，并计算出它们的个数成为 (a, b ,c) 的形式。

a：ID 选择器 的个数
b：Class 选择器、伪类选择器、属性选择器 的个数
c：元素选择器、伪元素选择器 的个数

让我们来举几个例子

只有一个 ID 选择器，依规则分类为 a ，个数 1，权重为 (1, 0, 0)
只有一个 ID 选择器，依规则分类为 b ，个数 1，权重为 (0, 1, 0)

那複杂的複合选择器该如何计算呢？其实概念是一样的

一个 Class 和一个伪类，分类皆为 b，权重为 (0, 2, 0)
ID 选择器为 a 类、元素选择器为 c 类、Class 选择器为 b 类，权重为 (1, 1, 1)
Class 选择器为 b，元素及伪元素皆为 c，权重为 (0, 1, 3)

---

Tips: 在 VSCode 中，只要将滑鼠移到选择器上方，就会看到算好的权重啰

权重比较

权重的比较顺序为 a -> b -> c，若前一位数相等才需要继续往下比，否则就依照大小决定权重顺序。也就是说不管后面两项如何， (1, n, m) 永远大于 (0, x, y)，而这个算法也符合了我们最前面所说的 ID 选择器 > Class 类别选择器 > 元素选择器。

举例：
#myID (1, 0, 0) > .myClass (0, 1, 0)
#myID:hover (1, 1, 0) > .myClass::after (0, 1, 1)

重点

通配符 (*) 的权重为 0含有 !important 的样式为最优先行内样式高于所有权重，但低于 !important先比权重(选择器优先度)，权重相同时前面的样式会被后面的覆盖

---

上一篇：[快速入门前端 17] CSS 选择器 (7) 选择器总结
下一篇：[快速入门前端 19] CSS 三大特性：层叠性、继承性、优先级
系列文章列表：[快速入门前端] 系列文章索引列表