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

CSS优选级课程.

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

p{ color: blue;}

.message{ color: green;}

#introduction{ color: red;}

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

答案是靠级联（cascade）。

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

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

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

1. 对于一个给定的样式属性，例如color，先找出应用到某一个指定元素的所有CSS选择器（Selector）

2. 根据公告的重要性和来源对选择器进行排位

3. 根据具体性(Specificity)来对拥有同样重要性的选择器进行排拉

4. 最后，假如重要性、起源和特异度都一样的话，将根据样式属性出现的顺序来排拉，后来者居上，最后一个出现的获胜。

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

第一步，遍历所有选择器

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

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

浏览器样式

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

客户样式

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

作者样式

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

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

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

1. 标记为!important的作者样式

2. 标记为!important的客户样式

3. 作者样式

4. 客户样式

5. 浏览器（客户代理商）的默认样式

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

第三步，比较样式属性的具体性(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)

选择器具体性的完整计算公式要比上面复杂得多，但理解上面的法则在一般情况下已经足够。

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

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

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

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

#introduction{ color: red;}

.message{ color: green;}

p{ color: blue;}

HTML/CSS高级教程。

如何避免冲突

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

我们推荐的编码规范是：

• 尽量使用 class，而不是id，即便该元素在HTML文档中只出现过一次

• 避免在一个HTML元素上使用多个类：不建议这样写

  ，建议写成

  ，后者具备更好的语义形容性

• 避免使用内联样式（inline styles） 比方

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