网络日志

CSS的权重和优先级详解

前言

说一下写本文的原因,一切起源于同事的一个问题:从图中可以看到,文字显示的红色而非黄色,概念上的css 权重被完全颠覆了,那么先抛开这个问题,详细讲讲 css 权重到底是什么。

权重

从上文可以看到,当一个元素被应用了多套样式规则时,浏览器需要决定优先使用哪套样式规则,而这就是通过最终权重决定。

权重值划分:

  1. !important 权重值+∞
  2. 内联样式style 权重值1000
  3. id选择器#id 权重值100
  4. 类选择器.class、伪类、属性选择器[attribute=] 权重值10
  5. 标签选择器div、伪元素 权重值1
  6. 通配符*、子选择器>、同胞选择器+等关系选择器 权重值0

优先级规则:

  1. 以上例权重划分值顺序从高到低比较,高等级相同时,比较下一等级,以此类推
  2. 完全相同时,后定义的样式覆盖前面
  3. 低权重选择器无法越级高权重,例如二十个标签选择器优先级低于一个类选择器,但css是256进制的,超过二百五十六个时就会发生越级
  4. 为目标元素直接添加样式,永远比继承样式的优先级高,无视权重规则

结论

熟悉完了权重和优先级相关知识后,回到正题来。从图中可以看到一个关键信息点,样式并没有产生相互覆盖,所以根据规则4大胆猜测下,伪元素::first-line其实是在div底下声明了个新的虚拟容器包裹住原文本元素,它继承了父元素的属性,但自己的样式属性还是会覆盖父元素属性。同理的还有::first-child。

引申

使用 !important 是一个坏习惯,虽然没有性能问题,但它破坏了样式表中固有的权重等级,使得调试找bug变得更加困难,所以尽量考虑使用样式规则的优先级来解决问题。

参考文档

https://developer.mozilla.org...