前端杂谈:CSS权重(Specificity)-创新互联

前端杂谈: CSS 权重 (Specificity)

css 权重 想必大家都听说过, 一些简单的规则大部分人也都知道:

站在用户的角度思考问题，与客户深入沟通，找到甘谷网站设计与甘谷网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟主机、企业邮箱。业务覆盖甘谷地区。

• 较长的 css selector 权重会大于较短的 css selector

• id selector 权重高于 class selector.

但是 具体规范 是什么? 浏览器是按照什么标准来判定不同选择器的权重的呢?

让我们来看一下 官方文档 是怎么说的~

第一个关键词:  Specificity

Specificity  is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of  CSS selectors

官方文档中用  Specificity: 特异性  来表示一个 css selector 和其元素的相关性. 相关性越强, 即表示表示其权重最高.

那么问题来了,  Specificity  是如何被比较的呢?

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each  selector type  in the matching selector.

Specificity 是由 selector 中 不同  selector type  的数目决定的.

第二个关键词:  Selector Type

根据  W3 标准 中的规定, css selector 分为 4 种 type:  a, b, c, d . 他们的数目计算规则为:

• a:  如果 css 属性声明是写在  style=“”  中的, 则数目为 1, 否则为 0

• b:  id 选择器的数目

• c:  class 选择器, 属性选择器(如  type=“text” ), 伪类选择器(如:  ::hover ) 的数目

• d:  标签名(如:  p ,  div ), 伪类 (如:  :before )的数目

在比较不同 css selector 的权重时, 按照  a => b => c => d  的顺序进行比较.

由第一个 selector type a 的计算规则可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具有最高的优先级.

而 id selector (b) 相较 class selector (c) 有更高的优先级. 这也和我们平时的经验相吻合.

还有一些 css 选择器你没提, 它们该怎么计算权重?

除了上面 Specificity 计算规则中的 css 选择器类型, 还有一些选择器如:  * ,  + ,  > , :not()  等. 这些选择器该如何计算其权重呢?

答案是这些选择器并不会被计算到 css 的权重当中 :)

有一个需要特别注意一下的选择器:  :not() , 虽然它本身是不计权重的, 但是写在它里面的 css selector 是需要计算权重的.

如果  a,b,c,d  算完都一样, 怎么办?

默认行为是: 当 specificity 一样时, 最后声明的 css selector 会生效.

如果我重复同样的 css selectory type, 权重会增加吗?

让我们来做个实验, 我们声明一个 html 节点:

  test div

.testClass.testClass {  background-color: red;
}.testClass {  background-color: black;
}

.testClass.testClass.testClass.testClass.testClass.testClass
  .testClass.testClass.testClass.testClass.testClass {  background-color: red;
}#testId {  background-color: black;
}