CSS权重是由四个数值决定，看一张图比较好解释：
从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
important的权重为1,0,0,0
ID的权重为0,1,0,0
类的权重为0,0,1,0
标签的权重为0,0,0,1
伪类的权重为0,0,1,0
属性的权重为0,0,1,0
伪对象的权重为0,0,0,1
通配符的权重为0,0,0,0
<html>
<head>
<style type="text/css">
#left{color:black!important} /*1,1,0,0*/
#container #left{color:red} /*0,2,0,0*/
#left{color:green!important} /*1,1,0,0*/
.container #left{color:blue} /*0,1,1,0*/
</style>
</head>
<body>
<div class="container" id="container">
<span id="left">这到底是什么颜色啊？</span>
</div>
</body>
</html>
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。选择符Specificity值列表：
选择符 语法 示例 特性
通配选择符 * *{ width:560px} 0,0,0,0
类型选择符 E1 td { font-size:12px} 0,0,0,1
伪元素选择符 :first-line :first-line{ font-size:12px} 0,0,0,1
伪类选择符 :link :link { font-size:12px} 0,0,1,0
属性选择符 [attr] [title] {color:blue} 0,0,1,0
ID选择符 #ID #test{ font-size:12px} 0,1,0,0
类选择符 E1.className .test{color:blue} 0,0,1,0
子对象选择符 E1 >E2 body >p {color:blue} E1+E2
相邻选择符 E1 + E2 div + p {color:blue} E1+E2
选择符分组 E1,E2,E3 .td1,a,body {color:blue} E1+E2+E3
包含选择符 E1 E2 table td {color:blue} E1+E2
规则：
1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。
如：<div style=”color: red”>test</div>
外部定义指经由<link>或<style>标签定义的规则；
2.!important声明的Specificity值最高；
3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
算法：
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加，
{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity，
然后在比较取舍时按照从左到右的顺序逐位比较
———-以上内容都是权重理论上的知识，按理说支持css2.1的浏览器应该都遵循———-
IE6和IE7却不完全是那么回事；这里说的IE7排除掉IE8的兼容模式。
1
2
3
4
5
6
7
8
a { /* 权重为[0,0,1] */
color: #00f
background-color: #ff0
}
a:hover { /* 权重为[0,1,1] */
color: #ff0
background-color: #00f
}
蓝色字，黄色背景，鼠标悬停的时候颜色颠倒
接下来，在添加规则
1
2
3
4
5
p a.cl1 { /* 权重为[0,1,2] */
color: #f00
background-color: #0ff
}
<p><a class="cl1" href="#">...</a></p>
红色字，浅绿色背景，权重为 [0,1,2], 比第一条权重高
在IE6下”normal” (not hover) 的值被覆盖了, 但是没有覆盖”hover”的值. 换句话说，权重为[0,1,1]的”hover”依然生效, 它没有被比他权重高的p a.cl1 [0,1,2]所覆盖 (但是没有定义:hover伪类)
1
2
3
4
5
.cl2 a.cl3 { /* 权重为 [0,2,1] */
color: #f00
background-color: #0ff
}
<p class="cl2"><a class="cl3" href="#">...</a></p>
红色字，浅绿色背景，权重为 [0,2,1], 比第一条规则”normal”和”hover”都要高
现在在IE6下不管是”normal”还是”hover”的值都被覆盖了,这时候权重 [0,2,1] 完全覆盖了权重 [0,1,1]
1
2
3
4
5
div p :hover { /* 权重为 [0,1,2] */
color: #f00
background-color: #0ff
}
<div><p><a href="#">...</a></p></div>
当鼠标悬停在链接上的时候是红色字，浅绿色背景 , 权重为 [0,1,2], 比第一条”hover”的权重 [0,1,1]高
第一条:hover完全被覆盖,IE6也是一样. 这个例子的权重 [0,1,2]和第二个例子的权重是一样的，但是它多了对 伪类:hover的定义就能完全覆盖第一条”hover”规则, 而第二个例子就不会覆盖
演示地址：IE6/Win: 关于伪类:hover的权重问题
IE6/win下伪类:visited也存在类似问题，不再赘述，演示地址：IE6-/Win: 关于伪类:visited的权重问题
还有其他一些，在IE67下都会产生错误权重的情况，其他浏览器有条件的请帮忙测试一下：
1
2
3
4
5
6
7
p.c12 {/* 权重为[0.1.1] */
color: #c00
}
div .c12 {/* 权重为[0.1.1] */
color: #090
}
<div><p class="c12">el.class (red), el .class (green) (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>
如果顺序换过来el .class (red), el.class (green)，就是正确的了
1
2
3
4
5
6
7
div .c24 {/* 权重为[0.1.1] */
color: #009900
}
.c23 p {/* 权重为[0.1.1] */
color: #CC0000
}
<div class="c23"><p class="c24">.class el (red), el .class (green) (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>
如果顺序换过来el .class (red), .class el (green)，就是正确的了
1
2
3
4
5
6
7
div #c28 {/* 权重为[1.0.1] */
color: #009900
}
#c27 p {/* 权重为[1.0.1] */
color: #CC0000
}
<div id="c27"><p id="c28">#id el (red), el #id (green) (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>
如果顺序换过来el #id (red), #id el (green)，就是正确的了
:first-letter使用的比较少，这个例子就不写了
1
2
3
4
5
6
7
8
p.c31 {/* 权重为[0.1.1] */
color: #c00/* red */
}
body p.c31 {/* 权重为[0.1.2] */
color: #090/* green */
color: miao /* 故意的错误 */
}
<p class="c31">在IE67下会错误显示红色</p>
演示地址：其他权重错误
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是重点。样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
•浏览器缺省设置
•外部样式表
•内部样式表（位于 <head>标签内部）
•内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。这只是一个大方面的优先级，在前面文章中我们讲过CSS有很多选择器，那么对于同种样式的CSS，各个选择器的优先级又是如何呢？
我们将某一个CSS看成一个三位数，通过比较数字的大小来获取优先级的高低，那么就会相当简单。在这里可以通过下面的规则来定义各个选择器对应的数字。
•百位数是该选择器上的id的数量的总和；
•十位数是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
•个位数是计算元素(就像table、p、div、*等等)和伪元素(就像:first-line等)；
•如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的那个起作用。
•标有"!important"的规则具有最高优先级，例如H1{color:black !importanfont-family:sans-serif}，前景色被标为important，这个前景色具有很高的优先级。但是这种声明容易引起混乱，因此通常使用得较少。
选择器 数值
h1 {color:blue} 1
p em {color:purple} 1 + 1 = 2
.apple {color:red} 10
p.bright {color:yellow} 1 + 10 = 11
p.bright em.dark {color:brown} 1 + 10 + 1 + 10 = 22
#id316 {color:yellow} 100
一般我们还可以通过浏览器的插件来查看，到底哪个CSS起作用，比如Firebug(Firefox)、Developer Tools(IE8)等。上面我们介绍到当优先级相同时，哪个CSS起作用取决于所处的位置，通常后面的CSS优先级要高。但是对于IE浏览器，具有相同数值的动态CSS取决于添加的顺序前后，而不是添加的位置前后；后添加的优先级要高。
