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

zyayyx85141

浏览: 12107 次

最近访客更多访客>>

nature919

adolfyang

qq_825129541

1301244717

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (25)

社区版块

存档分类

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

　　如果按照上面的优先级顺序来判断，规则的优先级相同的话（即所用的选择器类别相同，同类选择器的数量也相同），则需要进一步根据规则所在的位置来判断。

　　根据规则所在位置的优先级顺序

　　对于规则所在的不同位置，可以按照优先级从高到低排列如下：

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