css的优先级到底是怎么计算的呢?

浏览器计算css优先级一共有三个阶段

优先级计算的顺序⬇️

1. CSS规则的重要性和来源
2. CSS规则的特殊性
3. CSS规则在文档中出现的顺序

1. 重要性和来源

我们先看来源

• user agent stylesheet 浏览器默认样式
• author stylesheet 开发人员定义的样式
• user stylesheet 用户在浏览器中定义的样式

优先级:

1. user agent stylesheet
2. user style sheets中的normal规则
3. author style sheets中的normal规则
4. author style sheets中的important规则
5. user style sheets中的important规则

如果还没有决出胜负,进入下一阶段..

2. 按照特殊性

在这一阶段
优先级计算优先级时会有4个标识符 a, b, c, d

• 当这个方法没有使用选择器而是直接写到内联style中时, a = 1
• 当使用id时, b += 1
• 当使用其他属性(class name) 和伪类时 c += 1
• 当使用元素名和伪元素时, d += 1

a 到 d 优先级依次降低, 栗子如下:

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

3. CSS规则在文档中出现的顺序

还不能决定设优先的话, 后出现的样式规则会具有更高的优先级 :- ), 厉害了我的浏览器.

---

W3C链接:
https://www.w3.org/TR/CSS21/cascade.html#specificity
在一个css-trick链接(英文):
https://css-tricks.com/specifics-on-css-specificity/