:link,:visited,:focus,:hover,:active的用法

:link,:visited,:focus,:hover,:active的用法

二、CSS中若存在a{……}的定义

1、如果a:link{}也存在，那么不管a{}放到哪里，a{}和a:link{}冲突的属性都会采用a:link{}的，不冲突的属性若存在a{}中，会被a:link{}、 a:visited{} 、a:hover{} 、a:active{}都继承；如果存在a:link{}中，只会被a:link{} 、a:hover{} 和a:active{}继承，a:visited{}不继承。

2、如果没写a:link，只有其余三个，那么a:link会继 承a{}的所有属性，其余三个会保持自己的已有属性并从a{}中继承没有的属性。

3、如果没写a:hover，只有其余三个，那么a:hover{}会继承a:link{}中的所有属性，并从a{}中继承自己没有的属性；a:link{}会保持自己已有属性并从a{} 中继承没有的属性；a:active{}会保持自己已有属性先从a:link{}中继承没有的属性，再从a{}中继承至此前还没有的属 性；a:visited{}会保持自己已有属性并直接从a{}中继承没有的属性。

4、如果没写a:active{}，只有其余三个，那么a:active{}会继承a:hover{}的所有属性，之后上溯到a:link{}中继承至此之前 自己还没有的属性，再从a{}中继承自己至此仍没有的属性；a:hover{}会保持自己已有属性先从a:link{}中继承自己没有 的属性，再从a{}中继承至此仍没有的属性；a:visited{}会直接从a{}中继承自己没有的属性。

5、如果没写a:visited{}，只有其余三个，那么a:visited{}会继承a{}的所有属性。其余三个都是保持自己已有属性先从上一级（分级看上面的须知②，其中 a:link的上级是a）中继承没有的属性，再从a{}中继承至此自己没有的属性。

三、CSS中若没有a{……}的定义

1、如果没写a:link{}，a:link{}将采用默认的字体大小（无）和颜色（蓝色）
2、如果没写a:hover{}，a:hover{}将继承a:link{}的所有属性。如果有a:hover{}，它将从a:link{}中继承自己没有的属性。
3、如果没写a:active{}，a:active{}将先继承a:hover{}中 的所有属性，然后从a:link{}中继承至此仍没有的属性。
4、如果没写a:visited{}，a:visited{}将采用默认的字体大小（无）和颜色（紫色）。

四、总结

1、在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。

2、浏览器在显示元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。

3、如果故意打乱顺序，也会造成一些特殊的效果。比如，可以为链接制造出下划线颜色与文字颜色的差异。

4、再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .