CSS 权重

CSS权重决定了同一元素的不同样式规则的生效情况。

特殊性

选择器的特殊性由选择器本身组件确定。特殊性表述为四个部分(0,0,0,0)

  • 内联样式:1,0,0,0
  • ID选择器:0,1,0,0
  • 类选择器,属性选择器,伪类选择器:0,0,1,0
  • 元素、伪元素和:not:0,0,0,1
  • 结合符(关系选择符),通配符:0,0,0,0

重要性

在声明结束分号之前插入!important来标志为重要声明。

标志为!important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。

所有!important声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明想混。

如果一个重要声明与一个非重要声明冲突,胜出的总是重要声明。

继承

继承是从一个元素向其后代元素传递属性值所采用的机制。

继承的值根本没有特殊性,甚至连0特殊性都没有。

0特殊性比无特殊性要强。

* {color: red}
h1#page-title {color: black}

<!-- em元素的颜色是red -->
<h1 id="page-title">Meerkat <em>Central</em></h1>

来源

规则来源主要有3种:创作人员、读者和用户代理

权重由大到小顺序为:

  1. 读者的重要声明
  2. 创作人员的重要声明
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户代理声明

所谓读者样式表,是指读者利用某些浏览器创建自己的样式表。

层叠

CSS所基于的方法就是让样式层叠在一起,通过层叠规则来决定哪一个生效。

  1. 找出所有相关规则,这些规则都包含与一个给定元素匹配的选择器。
  2. 按显式权重对应用到该元素的所有声明排序。标志!important的规则权重高于没有!important的标志的规则。按来源对应用到给定元素的所有声明排序。
  3. 按特殊性对应用到给定元素的所有声明排序
  4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。