CSS 级联

样式表有三种来源:作者、用户、用户代理(浏览器默认)。

  • 作者 :作者在源文件中规定样式,可以通过内联或者外部资源这两种方式。
  • 用户 :用户可以用某种方式给特定的网站规定样式。
  • 用户代理 :用户代理默认样式代表了文档元素约定俗成的样式。(比如,对于多数浏览器来说 EM 元素代表斜体。) 这三种样式会在作用范围内相互重叠,互相作用。

CSS 级联为每条样式规定了权重,在一个元素受到多条样式影响的时候,只有权重最高的样式会生效。

一般来说,作者样式的权重大于用户样式大于用户代理样式。

级联顺序

浏览器寻找一个元素的最终样式的顺序:

  1. 寻找所有和这个元素匹配的选择器并且相对应的 @media。
  2. 根据样式来源排序:
    1. 用户代理声明
    2. 用户普通声明
    3. 作者普通声明
    4. 作者重要声明
    5. 用户重要声明
  3. 根据选择器的 特异性 给相同来源的样式进行排序。
  4. 最后,如果两个样式规则有相同的权重、来源、特异性,那么 声明位置靠后 的样式会生效。通过import声明的样式被认为位置更靠前。

选择器特异性

选择器特异性的计算规则如下:

  • 通过style属性规定的样式,a + 1;
  • 选择器中ID的数量(=b)
  • 选择器中其他属性(包括CLASS)和伪类的数量(=c)
  • 选择器中元素名和伪类的数量(=d)

特异性会根据abcd的顺序进行比较,只要靠前位置的数字较大,则特异性便较大。
比如: a=1 b=0 c=0 d=0 就大于 a=0 b=1 c=0 d=0

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
* {} /* 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 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

上面的例子中p的颜色会是绿色,因为它的style属性规定了它的颜色。

我在一些地方看到说<style></style>样式的优先级高于外部 CSS 样式,我认为这是不正确。它们的优先级没有差别,完全满足上述的规则。

参考