发现宝藏
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。
CSS 权重（或称为 CSS 优先级）决定了当多个 CSS 规则作用于同一元素时，哪一条规则会被应用。CSS 权重是由选择器的不同组成部分决定的。它通常是由数字形式表示的，数字越大，优先级越高。
1. CSS 权重的计算规则
CSS 权重是由四个组成部分计算得出的：
-
内联样式（Inline styles）：
- 内联样式的权重最高，因为它直接在 HTML 元素上设置了样式。
- 权重计算：
a = 1，其他三个位置为0。 - 例如：
<div style="color: red;">。
-
ID 选择器（ID selectors）：
- ID 选择器的权重较高。
- 权重计算：
b = 1，其他两个位置为0。 - 例如：
#header。
-
类选择器、属性选择器和伪类选择器（Class selectors, Attribute selectors, Pseudo-classes）：
- 类选择器、属性选择器和伪类选择器的权重次之。
- 权重计算：
c = 1，其他位置为0。 - 例如：
.nav,[type="text"],:hover。
-
元素选择器和伪元素选择器（Element selectors and pseudo-elements）：
- 元素选择器和伪元素选择器的权重最低。
- 权重计算：
d = 1，其他位置为0。 - 例如：
div,p,::before。
2. 权重的计算示例
CSS 权重是根据选择器的组成部分来计算的。计算的方式如下：
将每种选择器类型的数量作为数字，组成一个四元组 (a, b, c, d)。每一位代表不同类型选择器的数量，权重越高，优先级越大。
示例 1：
css">/* 选择器：div */
div {color: red;
}
- 权重：
(0, 0, 0, 1)
示例 2：
css">/* 选择器：.class */
.class {color: green;
}
- 权重：
(0, 0, 1, 0)
示例 3：
css">/* 选择器：#id */
#id {color: blue;
}
- 权重：
(0, 1, 0, 0)
示例 4：
css">/* 选择器：div.class */
div.class {color: yellow;
}
- 权重：
(0, 0, 1, 1)
示例 5：
css">/* 选择器：#id .class */
#id .class {color: purple;
}
- 权重：
(0, 1, 1, 0)
3. 权重比较规则
当多个 CSS 规则同时作用于同一元素时，浏览器会选择权重较高的规则应用。如果权重相同，则后面的规则会覆盖前面的规则。
示例：
css">/* 权重为 (0, 0, 1, 0) */
.class {color: red;
}/* 权重为 (0, 1, 0, 0) */
#id {color: blue;
}/* 权重为 (0, 0, 0, 1) */
div {color: green;
}
对于同一元素，#id 会应用 color: blue，因为它的权重 (0, 1, 0, 0) 高于 .class (0, 0, 1, 0) 和 div (0, 0, 0, 1)。
4. 使用 !important 声明
!important 可以强制某条规则的应用，绕过正常的权重计算规则。具有 !important 的规则将优先应用，但它的优先级仍然遵循上述权重计算规则。如果多个规则都包含 !important，则按正常的权重规则比较。
示例：
css">/* 权重为 (0, 1, 0, 0) */
#id {color: blue !important;
}/* 权重为 (0, 0, 1, 0) */
.class {color: red !important;
}
在这种情况下，#id { color: blue !important; } 会应用，因为 !important 使其具有最高的优先级。
5. 总结
- 内联样式 > ID 选择器 > 类选择器、属性选择器、伪类 > 元素选择器、伪元素选择器。
- 计算权重时，按照选择器的种类和数量来给出优先级。
- 使用
!important可以强制应用某条规则，但仍然受权重规则的限制。
掌握 CSS 权重规则可以帮助你更好地管理样式的应用顺序，避免样式冲突。
