使用 Dojo 的 Ajax 应用开发进阶教程,第 2 部分: 深入理解 CSS(4)

Juey 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>

相关推荐

qscool / 0评论 2020-01-24