我们来看一下一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color:yellow;
} h1.title {
color:red;
}
</style>
</head>
<body>
<h1 class="title">我是H1</h1>
</body>
</html>
大家觉得h1这个元素应该是红色还是黄色的呢？
答案是红色的，但是为什么呢？答案就在于每个选择器的特殊性（specificity）。对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。
如果一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出。
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0，0，0，0。一个选择器的具体特殊性如下确定：
对于选择器中给定的各个ID属性值，加0，1，0，0。
对于选择器中给定的各个类属性值，属性选择或伪类，加0，0，1，0。
对于选择器中给定的各个元素和伪元素，加0，0，0，1。伪元素是否有特殊性，在这方面css2有些自相矛盾，不过css2.1很清楚的指出，伪元素有特殊性，而且其特殊性为0，0，0，1。
通配选择器对一个选择器的特殊性没有贡献。换句话说，其特殊性为0,0,0,0。
h1{ color:yellow; }//0,0,0,1
h1.title{color:red;}//0,0,1,1
选择器h1.title之所以能赢，是因为它多了一个1；0,0,1,1大于0,0,0,1；浏览器在计算这些值的时候从左到右排序的。
所以如果有这么两条样式的话
<style>
h1 {
color:yellow;
} body h1{
color:red;
}
</style>
h1{ color:yellow; }//0,0,0,1
body h1{color:red;}//0,0,0,1
当浏览器计算出两条规则特殊性一样的话，就会按照顺序来，下面的会覆盖前面的规则。
那么第一个0代表什么呢，一般地，第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高。
有时某个声明可能非常重要，超过了所有其他声明。CSS2.1称之为重要声明（原因显而易见），并允许在这些声明的结束分号之前插入！important来标志。
p.dark {color:#333 !important; background: white;}
在此为颜色值#333加了标志！important,而背景值white未加这个标志。如果你希望把两个声明都标志为重要，那么每个声明都需要它自己的!important标志：
p.dark {color:#333 !important; background: white !important;}
必须正确地放置!important,否则声明将无效。！ important总是放在声明的最后，即分号前面。如果一个属性的值可以包含多个关键词，如font,这一点则尤其重要，必须将!important标志放在声明的最后：
p.light {color: yellow; font: smaller Times, serif !important;}
如果!important放在font声明的任何其他位置，整个声明都将无效，相应地不会应用其任何样式。