本文详细解释了CSS层叠顺序的原理，包括不同选择器优先级的比较以及规则位置对优先级的影响，并通过实例展示了如何解决样式冲突。
原文：http://www.verydemo.com/demo_c104_i30051.html
如果按照上面的优先级顺序来判断，规则的优先级相同的话（即所用的选择器类别相同，同类选择器的数量也相同），则需要进一步根据规则所在的位置来判断。
根据规则所在位置的优先级顺序
对于规则所在的不同位置，可以按照优先级从高到低排列如下：
在 HTML 文档的 head元素中的 style元素中定义的规则。
....................................................................
通过 link元素引入的样式表中定义的规则。
在 link元素引入的样式表中，再通过 @import语句引入的样式表中定义的规则。
最终用户提供的样式表中定义的规则。
浏览器默认提供的规则。
如果规则所在的位置相同的话，出现在样式表后面的规则的优先级更高。
通过这样的两套规则机制，就保证了浏览器可以解决互相冲突的规则的优先级问题。下面通过一个示例来具体说明层叠顺序的机制。
层叠顺序示例
演示层叠顺序的示例所使用的 HTML 和 CSS 如 代码清单 1所示。
清单 1. 层叠顺序示例
<style>
* { color : black; }
p { color : gray; }
.p_red{ color : red; }
p.p_blue { color : red; }
#p1 { color : green; }
.p_blue { color : blue; }
.p_blue2 { color : blue !important;}
</style>
<body>
<p id="p1" class="p_red"> 示例文本 1</p>
<p class="p_red"> 示例文本 2</p>
<p class="p_blue"> 示例文本 3</p>
<p class="p_blue p_blue2"> 示例文本 4</p>
</body>
扫一扫
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
