浏览器计算css优先级一共有三个阶段
优先级计算的顺序⬇️
- CSS规则的重要性和来源
- CSS规则的特殊性
- CSS规则在文档中出现的顺序
1. 重要性和来源
我们先看来源
- user agent stylesheet 浏览器默认样式
- author stylesheet 开发人员定义的样式
- user stylesheet 用户在浏览器中定义的样式
优先级:
- user agent stylesheet
- user style sheets中的normal规则
- author style sheets中的normal规则
- author style sheets中的important规则
- 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/
