一.首先从CSS级别来进行优先级划分：
CSS控制页面样式的四种方法：
1.行内样式
通过style特性
<p style=”color:#F00; background:#CCC; font-size:12px;”></p>
2.内嵌方式
将CSS代码写在head和/head之间,并用style进行声明
<style type=”text/css”>
<!–
#div1{64px; height:64px; float:left;}
#div1 img{64px; height:64px;}
–>
</style>
3.链接方式
<link href=”style.css” type=”text/css” rel=”stylesheet” />
4.导入方式
导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。(这个目前没遇到过)
四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式
目前有个疑问：如果内嵌定义了p,链接定义了a,那么内嵌应该不会覆盖链接吧？
二.从CSS内部进行优先级划分
CSS通过一个叫做层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要程度指数。作者定义的样式具有最高的重要性指数，其次是用户定义的样式。但是为了增强用户的控制能力，用户可以通过为任何规则增加一个!important来提高它的重要性指数，让它的优先级高于任何规则，甚至是比作者的!important还要高。
因此，层叠重要性指数的次序依次为：
- 标记为!important的用户样式
- 标记为!important的作者样式
- 作者样式
- 用户样式
- 浏览器/用户代理的默认样式
默认样式的选择器的优先指数由选择符对应的数值相加而成，数值越高，优先级越高。
CSS中的选择符有四类：
- 行内样式（Inline Style），如<span style="color:red">...</span>
- ID选择符（ID selectors），如#myid
- 类、属性选择符、伪类（Classes, attributes and pseudo-classes），如 .class {...}、[href$=dudo.org]、:hover
- 元素（elements)、伪元素选择符(pseudo-elements)，如 p {...}、:first-line {...}
- 通配符选择器，即*，为0
- 继承来的，最低。
行内样式为：1000
ID选择符为：0100
类选择符为：0010
元素样式为：0001
例如，body #wrap p {...}，那么它的优先级指数就是 1 100 1=102，而body div#wrap p {...}的优先级指数就是 1 1 100 1 =103。
三.继承产生的冲突
血缘越近的优先级越高,父继承比爷爷继承优先级高.
浏览器的控制台是很好的参考工具,而且会详细帮你划掉冲突中被排除的规则.
比如如下：
2的颜色还是会是蓝色，因为继承的权重最低。
即使将span改为*，也还是蓝色，继承的权重比*还低。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{color:blue;}
body div.red{color: red;}
</style>
</head>
<body>
<div class="parent">
<div class="red">1</div>
<div class="blue"><span>2</span></div>
</div>
参考：
http://www.jb51.net/css/6773.html
http://www.cnblogs.com/liwon/p/3526369.html