有的时候两个或者多个声明会使用在同一个元素上。而这也可能带来冲突。当冲突发生时，权重最大的声明将会得到使用。因此怎样决定权重呢？
当浏览器载入一个页面时，所有的声明都被保存并且被赋予了一个权重。然后它们通过权重作用在文档上。 进行这样的排序需要四个步骤。由于过程比较繁琐，我们将用一个HTML元素（<h2>）作为实例。
在遍历完所有的样式表（浏览器，用户，作者）之后，所有符合<h2>元素的声明都已经找到。
浏览器样式表可能包括以下相关的规则：
h2 { font-size: 1.5em; margin: .83em 0; color: black }
用户样式表可以包含以下规则：
h2 { color: brown !important; }
作者样式表可以包含以下相关的规则：
h2 { color: green; font-size: 1.2em; padding: 10px; }
h2#main { color: red; }
h2.navigation { color: blue;}
以上的规则随后将通过权重和加载顺序进行排序。对于普通的声明，作者样式表将覆盖用户样式表和浏览器样式表，除非存在“!important”声明。因为使用“!important”声明，用户样式表可以覆盖作者样式表和浏览器样式表。
对于普通的用户，没有使用“#main”和“.navigation”中的<h2>元素的样式将会是：
font-size: 1.2em; /* 作者样式表覆盖浏览器样式表 */
margin: .83em 0; /* 仅浏览器样式表设置 */
padding: 10px; ; /* 仅作者样式表设置 */
color: green; /* 作者样式表覆盖了浏览器样式表 */
对于使用了!important规则的用户，没有使用“#main”和“.navigation”中的<h2>元素的样式将会是：
font-size: 1.2em; /* 作者样式表覆盖浏览器样式表 */
margin: .83em 0; /* 仅浏览器样式表设置 */
padding: 10px; ; /* 仅作者样式表设置 */
color: brown; /* 用户样式表覆盖作者样式表 */
即使我们已经为<h2>元素设置好了样式，仍然可能在文档中的其他区域产生冲突。使用“#main”的<h2>元素的样式又会是怎样的？
每一个选择器都会赋予一个由整个选择器计算出来的特征。更特殊的选择器将覆盖普通的选择器。整个的计算过程基于以下规则：
a . 在整个选择器中计算出id的个数
b . 在整个选择器中计算出其它选择器的个数
c . 在整个选择器中计算出元素的个数
这三步计算过程可以写成以上的a-b-c. 应用上面的例子，以下声明可以被拆分为：
h2 { font-size: 1.5em; margin: .83em 0; color: black }
0-0-1 > specificity = 1
h2 { color: brown !important; }
0-0-1 > specificity = 1
h2 { color: green; font-size: 1.2em; padding: 10px; }
0-0-1 > specificity = 1
h2#main { color: red; }
1-0-1 > specificity = 101
h2.navigation { color: blue;}
0-1-1 > specificity = 11
这意味着“h2#main”拥有最大的权重，“h2.navigation”次之。
对于普通的用户（不使用!important规则）来说，<h2>元素的样式为：
color: red; /* id选择器覆盖元素选择器 */
任何一个使用了class="navigation"的<h2>元素的样式为：
color: blue; /* 类选择器覆盖元素选择器 */
如果“#main”和“.navigation”同时使用了，那么ID选择器将覆盖类选择器：
color: red; /* id选择器覆盖类选择器 */
如果有两条规则拥有相同的权重，加载顺序以及特征，那么在样式表中写在后面的声明将会覆盖前面的声明。导入的样式表规则一般覆盖样式表本身的任何规则。
例如，样式表能够在一个文档的许多部分中包含两种规则：
h2 { color: blue;}
h2 { color: green; }
第二种规则，由于写在后面，因此它将覆盖前面的规则。