CSS权威指南-层叠

如果特殊性相等的两个规则同时应用到同一个元素会怎么样？

CSS2.1的层叠规则：

有时如果所有规则视图设置同一个属性，就会出现这种冲突，如果各规则为不同的属性设置样式，那么顺序无关紧要。



解说 :link :visited :hove :active的顺序问题

如果这四个规则试图设置同一个属性，就会出现冲突。

a:link{ color:red; }

a:visited{ color:yellow; }

a:hover{ color:gray; }

a:active{ color:green; }

他们有相同的权重、来源和特殊性，因此与元素匹配的最后一个选择器才会胜出。

a:hover{ color:gray; }

a:active{ color:green; }

a:link{ color:red; }

a:visited{ color:yellow; }

按照上面的顺序，a链接都不会显示:hover或:active的样式，所有链接都必须要么是已访问，要么是未访问的。所以:link和:visited样式总是会覆盖:hover规则。

a:link{ color:red; }

a:hover{ color:gray; }

a:visited{ color:yellow; }

a:active{ color:green; }

按照上面的顺序，只有为访问的链接会有悬停样式，已访问的链接没有悬停样式，未访问和已访问的链接都有激活样式；