CSS 选择器的优先级问题

CSS 意为层叠样式表。所谓层叠,就是说,可以用多个 CSS 声明来作用于同一元素,例如用一段 CSS 来定义文字的颜色,用另外一段 CSS 来定义文字的大小,最终达到样式叠加的效果。

这种特性一定程度上使 CSS 可以更为方便的定义样式,但同时也带来了一定的复杂性。例如,当多个样式作用于同一个元素,而且还是作用于同一个属性,元素最终会以何种方式来呈现样式呢?

参考下面这个例子:

p {
	color: black;
	background-color: white;
}
div.warning p {
	color: red;
}
div#caution p {
	color: yellow;
}
body#home div p {
	color: white;
}

此样式表中有 4 组选择器,且最终都指向 p 元素,并且每组样式中都有 color 属性。这样一来,可能的情况就是会有多个颜色属性,被施加于同一个 p 元素。问题来了,浏览器最终会以什么样的方式来渲染 p 的颜色呢?后定义的颜色会覆盖掉先定义的颜色吗?

这里就涉及到一个 CSS 选择器优先级的问题,如果有多个选择器作用于某元素的同一个属性,那么浏览器会去计算其对应选择器的优先级,并最终将优先级最高的那个选择器的样式作用于元素。

如何计算优先级呢?

优先级的计算通常遵循如下规则:

  1. 如果某元素被设置了 style 属性,也就是说被设置了行内样式,那么此行内样式将拥有最高的优先级,任何其它外部样式都不能将其覆盖。如果没有被设置行内样式,那么参照下面的第 2 条规则。
  2. 数一下选择器中 ID 选择器的个数,个数最多的,优先级就最高。如果 ID 选择器个数相同,或者压根儿就没有 ID 选择器,那么参照下面的第 3 条规则。
  3. 数一下类选择器(如 .test)的个数,属性选择器(如 [type="submit"])的个数,还有伪类选择器(如 :hover)的个数,然后将个数加起来,总数最多的,这组选择器的优先级就最高。如果总是一样多,或者都为 0,那么参照下面的第 4 条规则。
  4. 数一下标签选择器(如 p)的个数,另外还有伪元素选择器(如 :first-letter)的个数,加起来,总数最多的,优先级就最高。

如果经过上面的计算,优先级还是一样高,那么遵循后出现的样式覆盖先出现的样式之规则。

现在回过头来看先前的例子,那四组选择器的优先级分别为 0001、0012、0102、0103,之所以把优先级数字化,是因为这样更方便比较。按照自然数法则(事实上它们并非自然数)来比较,1 < 12 < 102 < 103,这样一来,它们的优先级孰高孰低,就一目了然了。

Posted on 2011-04-25

2 Comments

  • 岸本 岸本 over 5 years ago

    行内样式 > ID选择器 > 类选择器 > 标签选择器

  • miao miao over 3 years ago

    !important 最高,然后才是行内~

Leave a Comment