引言💭
在 CSS 中，权重决定了哪条规则会应用到 HTML 元素。当多个规则作用于同一元素时，浏览器会根据权重来判断哪一条规则优先执行。
这也是一个面试高频考题，赶紧码住。✍🏻
什么是 CSS 权重？🤔
CSS 权重是一个数值，用来表示某个选择器的优先级。浏览器根据该优先级来决定哪些规则被应用。CSS 权重的计算是根据选择器的类型（例如：元素、类、ID 选择器等）来确定的。每种选择器类型对应一个特定的权重值，而这些权重值会按照一定的规则叠加。
权重通常用四个数字表示，形式为 (a, b, c, d)。这四个数字分别代表不同类型选择器的权重：
- a: 内联样式的权重，优先级最高。
- b: ID 选择器的权重。
- c: 类选择器、属性选择器和伪类选择器的权重。
- d: 元素选择器和伪元素选择器的权重。
CSS 权重计算的详细规则📑
-
内联样式（
style="..."）:- 权重：
(1, 0, 0, 0)，内联样式的优先级最高。 - 示例：
<div style="color: red;">内容</div>
- 权重：
-
ID 选择器：
- 权重：
(0, 1, 0, 0)，每个 ID 选择器的权重为1。 - 示例：
#header { color: red; }，#menu { color: blue; }
- 权重：
-
类选择器、属性选择器和伪类选择器：
- 权重：
(0, 0, 1, 0)，每个类选择器、属性选择器和伪类选择器的权重为1。 - 示例：
.menu { color: green; }，[type="text"] { color: orange; }，:hover { color: purple; }
- 权重：
-
元素选择器和伪元素选择器：
- 权重：
(0, 0, 0, 1)，每个元素选择器和伪元素选择器的权重为1。 - 示例：
div { color: blue; }，p { color: red; }，::before { content: ''; }
- 权重：
权重计算示例📌
假设有以下的 CSS 规则：
#header { color: red; }
.menu { color: green; }
div { color: blue; }
对应的 HTML 元素为：
<div id="header" class="menu">Hello</div>
根据权重计算，浏览器会按照以下方式决定哪个规则生效：
-
#header { color: red; }：- 权重：
(0, 1, 0, 0)，使用了 ID 选择器。
- 权重：
-
.menu { color: green; }：- 权重：
(0, 0, 1, 0)，使用了类选择器。
- 权重：
-
div { color: blue; }：- 权重：
(0, 0, 0, 1)，使用了元素选择器。
- 权重：
由于 ID 选择器的权重最高（(0, 1, 0, 0)），最终文本的颜色会是 红色，即 #header 规则生效。
权重递增与选择器的组合🌈
多个选择器组合时，它们的权重会叠加。例如：
#header .menu div { color: purple; }
此时，#header .menu div 的权重是 (0, 1, 1, 1)，它包含了一个 ID 选择器（#header）、一个类选择器（.menu）和一个元素选择器（div）。它的权重为：
- ID 选择器：
1 - 类选择器：
1 - 元素选择器：
1
因此，最终权重为 (0, 1, 1, 1)。
内联样式的优先级🎢
内联样式具有最高的优先级，权重为 (1, 0, 0, 0)。即使在外部样式表中存在其他选择器，内联样式也会覆盖它们。
例如，以下 HTML 元素的内联样式将覆盖任何外部样式：
<div id="header" class="menu" style="color: yellow;">Hello</div>
即使外部 CSS 中有 #header { color: red; } 和 .menu { color: green; }，内联样式 style="color: yellow;" 仍然会应用，并使文本的颜色变为 黄色。
选择器优先级的具体比较🚀
假设以下 CSS 规则：
#header { color: red; }
.menu { color: green; }
div { color: blue; }
以及 HTML 元素：
<div id="header" class="menu">Hello</div>
在此情况下，CSS 规则的权重：
#header { color: red; }的权重为(0, 1, 0, 0)。.menu { color: green; }的权重为(0, 0, 1, 0)。div { color: blue; }的权重为(0, 0, 0, 1)。
因此，最终会应用 #header { color: red; }，因为它的权重最大，红色会覆盖其他颜色。
结语✒️
在编写 CSS 时，尽量避免使用过多的高权重选择器，尤其是 ID 选择器，以保持样式的可维护性。如果你遇到样式覆盖问题，首先检查选择器的权重，确保它们按正确的顺序排列。🫰🏻
