五、附加说明
- 文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style="color:red">blah</div>的样式,而外部定义指经由<link>或<style& gt;卷标定义的规则。
- 有!important声明的规则高于一切。
- 如果!important声明冲突,则比较优先权。
- 如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
- 由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
- 关于经由@import加载的外部样式,由于@import必须出现在所有其它规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。
还需要说一下,IE是可以识别位置错误的@import的,但无论@import在什么地方,它都认为是位于所有其它规则定义之前的,这可能会引发一些误会。
优先权问题看起来简单,但背后还是有非常复杂的机制,在实际应用中需要多多留意。
六、练习
看完上面的文字后,来做几道非常简单的题目。(自己答完前,请不要先看各题给出的链接地址哦)
1. 如何让使用两个使用相同样式名的元素具有不同的效果:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]