CSS权重是由四个数值决定，看一张图比较好解释：
图里是英文的，我翻译过来分别说一下，4个等级的定义如下：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
最后把这些值加起来，再就是当前元素的权重了。
权重算出来了，但是某个元素到底用哪个样式，还有3个规则,：
1，如果样式上加有!important标记，例如：
p{ color: gray !important}那么始终采用这个标记的样式。
2，匹配的内容按照CSS权重排序，权重大的优先；
可以看到，CSS权重只是决定应用哪个样式的其中一个步骤，不过这个步骤是最复杂的，上面已经说过了。
3，如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先，例如：
h1 {color: blue}h1 {color: red}
最终胜出的是color: red。
PX:PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。EM:EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，这个网站不错，输入数据就可以px和em相互计算。狠击这里：px和em换算Rem:EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。浏览器的兼容性除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。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>
