4.5 CSS 优先级（Priority）

优质

小牛编辑

153浏览

2023-12-01

由于前面章节所述的CSS继承特性以及多种类型的选择器作用域范围会出现重叠，所以常会有多个CSS规则作用于同一个HTML元素。比如对于下面的HTML代码：

<p class="message" id="introduction">
  xnip is a leading search engine on free HTML tutorials.
</p>

我们分别使用标签（tag）、类（class）和ID选择器来设置元素的颜色：

p{ color: blue;}
.message{ color: green;}
#introduction{ color: red;}

这3条CSS规则都选定了上述的p元素，但是浏览器只能用一种颜色来绘制文本。类似这样的样式冲突，究竟哪个规则会起作用呢？

答案是靠级联（cascade）。

级联将结合重要性、具体性（或称为特殊性：Specificity）以及出现的顺序来决定每一种样式属性的权重，这个权重将会用来决定浏览器将会采用哪一种样式属性，权重高的则优先使用（具有更高的作用优先级）。上例中p的颜色将会是红色，因为 #id 选择器是最具体的也因此是最重要的。

权重（或优先级）是怎么计算的

CSS将通过以下四步来计算每一个样式属性的权重：

对于一个给定的样式属性，例如color，先找出应用到某一个指定元素的所有CSS选择器（Selector）
根据声明的重要性和来源对选择器进行排位
根据具体性(Specificity)来对拥有同样重要性的选择器进行排拉
最后，如果重要性、起源和特异度都一样的话，将根据样式属性出现的顺序来排拉，后来者居上，最后一个出现的获胜。

下面逐一说明每一步的实际执行方式：

第一步，遍历所有选择器

浏览器在渲染某个HTML元素时，首先会寻找所有作用在该元素上的有效CSS选择器，为此，它根据指定的媒体类型（media type）遍历所有的样式表来源，选择器的来源包括：用户代理（浏览器）样式、作者样式和用户样式。

这里提到的媒体类型是CSS2中一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更灵活多样的界面，CSS3的媒体查询（media query）是对媒体类型的一个增强，后面的课程会详细讨论。常用的media type包括all/screen/print，可以通过如下的方式定义： <link href="style.css" media="screen print" ...>

浏览器样式

也就是浏览器自身设置用来显示网站的默认样式，不同的浏览器可能有不同的样式表，例如Chrome和IE、Firefox的就不一样，所以大家分别使用这些浏览器访问同一个网站的时候，看到实际效果可能就不尽相同。

用户样式

浏览器还允许用户设置网页的样式，例如，我们用IE浏览网站的时候，都可以通过浏览器查看菜单下的样式或者文字大小子菜单来设置网页实际的显示效果。

作者样式

网页创建者建立的样式表，是网站源代码的一部分，就是我们所讲述的在HTML文档中引入的CSS文件或内置style样式。

第二步，比较样式属性的重要性

通常情况下，作者样式具有最高的重要性，其次是用户样式，最后才是浏览器样式，但是如果出现了!important标记的话，那么规则会被改变，通过!important 可以提高某种样式的重要性，让它的优先级高于其他没有加该声明的所有样式。下面是样式属性的重要性顺序（由高至低）：

标记为!important的作者样式
标记为!important的用户样式
作者样式
用户样式
浏览器（用户代理）的默认样式

当两个样式属性拥有相同的重要性的时候，那么将进入第三步。

第三步，比较样式属性的具体性(Specificity)

具体性可以通过一个简化易用的1000法则来计算

内联样式（inline styling） 权重 1000
ID（#id） 权重 100
类（.class） 权重 10
标签（tag） 权重 1

然后你可以把多个选择器的权值相加，来得到最终的Specificity：

p 具体性 1 (1个标签选择器)
div p 具体性 2 (2个标签选择器, 1+1)
.tree 具体性 10 (1个类选择器)
div p.tree 具体性 12 (2个标签选择器 + 1个类选择器, 1+1+10)
#baobab 具体性 100 (1个id选择器)
body #content .alternative p 具体性 112 (标签选择器 + id选择器 + class选择器 + 标签选择器, 1+100+10+1)

选择器具体性的完整计算公式要比上面复杂得多，但了解上面的法则在一般情况下已经足够。要详尽了解细则，可以阅读你必须知道的CSS具体性知识一文。

第四步，判断样式属性出现的先后顺序

这一步最简单，出现晚的选择器将拥有高优先级，也就是后来者居上。

对于外部引入的样式表，@import比link拥有更高的优先级，不管它是否出现在link引入之后。

理解了上述的优先级计算规则，我们应该可以推断出前面例子中p元素的最终颜色：

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

<p class="message" id="introduction">
  xnip is a leading search engine on free HTML tutorials.
</p>

xnip is a leading search engine on free HTML tutorials.

如何避免冲突

尽管浏览器能够处理CSS样式冲突，但避免不必要的样式冲突仍然是一个好的编程习惯，即可以避免意外的样式覆盖，也有助于减少无谓的优先级计算。

我们推荐的编码规范是：

尽量使用 class，而不是id，即使该元素在HTML文档中只出现过一次
避免在一个HTML元素上使用多个类：不建议这样写 <p class="big red important">，建议写成 <p class="title">，后者具有更好的语义描述性
避免使用内联样式（inline styles） 比如 <div style="background: blue;">

当然上面的只是一般性建议，很多场合下给一个HTML元素添加多个类是有益的，比如给所有希望被隐藏的元素加上hidden类（display:none），可以提高样式代码的复用度。