问题:请指出以下结构中,A标签内的字体颜色。
<style>
a{ color:#ccc}/* 灰色 */
.alink a{color:#F60}/* 橙色 */
h1 a{color:#F00}/* 红色 */
a:link{color:#009}/* 蓝色 */
div h1 a{ color:#000}/* 黑色*/
</style>
<div id="contact">
<h1 class="alink">
<a href="#">这里是文字内容</a>
</h1>
</div>
正确答案:蓝色
其实验证方式很简单,运行一下就可以知道了。
.alink a和a:link其实优先级是一样的,哪一个定义在后面,就显示哪一个的颜色;
网上有一段判断优先级的方法:
内联样式(1000)> ID(100)> CLASS(10)> DIV(1)>*(0)
简单解释一下就是,内联样式的优先级高于ID,ID高于class,class高于标签,标签高于通配符;
括号里是具化了一下选择符所代表的权重,然后计算该选择符的个数总和,按照权重相加,哪一组样式的总值大,那么优先级就最好。
(这里没有说 !important,因为他是*喽~~~)