重新认识CSS的权重

Ghostzhang 发表于

今天 [大白] 问了一个关于CSS权重的问题:

关于选择器权重的问题 。class的权重是10 标签权重是比如说 p span{} 权重是2. 如果11标签自选择器的组合的权重11,会不会覆盖 一个class选择器权重10的 样式?

在跟他的讨论中,重新整理了我对CSS权重的理解。

在《样式的作用域──页面重构中的模块化设计(一)》中有做过总结,其中提到比较重要的两点:

  1. 权值的大小跟选择器的类型和数量有关
  2. 样式的优先级跟样式的定义顺序有关

在《继承──页面重构中的模块化设计(三)》的评论中 [operafans] 也提到了

标签选择器的权值永远都比一个类选器择器的权值低,无论有多少个

但一直以来都还是没能想通。

其实规则很简单:比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级,大家应该已经很清楚了,就是:

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

这也就解释了为什么11个标签的定义会比不上1个类的定义,1个类加11个标签会比不上2个类的权重高。

讨论