选择符优先级-----:link伪类

问题：请指出以下结构中，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其实优先级是一样的，哪一个定义在后面，就显示哪一个的颜色；

判断选择器的优先级可以按照打群架的方式联想：谁人多谁强大；人一样多，后来者居上；小啰啰再说，也抵不上一个大boss。

也就是说，首先数选择符个数，哪个样式里的选择符多，哪个的优先级就高；如果大家选择符一样多，那定义在后面的起作用；如果只是有很多标签选择符，那也比不上一个类或是id选择符。