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

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/

发表评论

电子邮件地址不会被公开。 必填项已用*标注