使用 Dojo 的 Ajax 应用开发进阶教程，第 2 部分: 深入理解 CSS(4)
MaureenChen 2014-06-03
原文：http://www.verydemo.com/demo_c104_i30051.html
如果按照上面的优先级顺序来判断，规则的优先级相同的话（即所用的选择器类别相同，同类选择器的数量也相同），则需要进一步根据规则所在的位置来判断。
根据规则所在位置的优先级顺序
对于规则所在的不同位置，可以按照优先级从高到低排列如下：
在 HTML 文档的 head元素中的 style元素中定义的规则。
....................................................................
通过 link元素引入的样式表中定义的规则。
在 link元素引入的样式表中，再通过 @import语句引入的样式表中定义的规则。
最终用户提供的样式表中定义的规则。
浏览器默认提供的规则。
如果规则所在的位置相同的话，出现在样式表后面的规则的优先级更高。
通过这样的两套规则机制，就保证了浏览器可以解决互相冲突的规则的优先级问题。下面通过一个示例来具体说明层叠顺序的机制。
层叠顺序示例
演示层叠顺序的示例所使用的 HTML 和 CSS 如 代码清单 1所示。
清单 1. 层叠顺序示例
<style> <br> * { color : black; } <br> p { color : gray; } <br> .p_red{ color : red; } <br> p.p_blue { color : red; } <br> #p1 { color : green; } <br> .p_blue { color : blue; } <br> .p_blue2 { color : blue !important;} <br> </style> <br> <br> <body> <br> <p id="p1" class="p_red"> 示例文本 1</p> <br> <p class="p_red"> 示例文本 2</p> <br> <p class="p_blue"> 示例文本 3</p> <br> <p class="p_blue p_blue2"> 示例文本 4</p> <br> </body>
