:link,:visited,:focus,:hover,:active详解

CSS 又名 层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，因此在样式表中，各样式排列的顺序颇有讲究。

 

:link 与  :visited 在样式文件中的顺序能够随便放置。

而focus， hover，active这几个，若是你设置的顺序不一样，会直接影响样式的显示效果，下面会详细解释。

:focus -> :hover -> :active

 

有些人可能会困惑，为何必需要按这样的顺序，而不能打乱呢？ 其实他们每个选择器都表明一个含义。

:link表明为访问连接的样式，因此只要你是超连接，且未被访问过，则连接都会按照你设定的样式显示，因此它的位置顺序无所谓。

:visited表明连接访问后的样式，则连接一旦被访问，则以后它的样式就会是你所设置的visited样式

重点是下面这几个：

:focus 表明的是获取焦点时的样式，有人说啥是获取焦点时的样式，这个咱们能够经过tab键来查看，一旦连接获取了焦点，则它的样式就是你设置的focus样式

:hover 表明的是你光标通过某一元素时的样式，若是将此样式放在:focus以后，则当连接获取焦点时，显示:focus样式，当光标通过此连接时，会显示hover的样式，由于hover排在后，会覆盖focus样式。

            若是:hover排在前，:focus排在后，则当光标得到焦点时显示:focus的样式，但当光标通过连接时，样式并未显示:hover的样式，而是继续是:focus的样式，由于应用的focus样式在hover以后，覆盖了前面的样式。

 

测试代码以下:

a:focus{
color:#AA80FE;
text-decoration:underline;
}
 
a:hover{
color:#FF0000;
text-decoration:underline;
}

a:hover{
color:#FF0000;
text-decoration:underline;
}
 
a:focus{
color:#AA80FE;
text-decoration:underline;
}

:active 表明元素被激活时的样式，也就是元素被按下时的样式，若是:active选择器与 :focus , :hover 调换位置，则显示的效果也会不一样，由于排在后面的样式，会覆盖前面的样式。

 

测试代码以下：

a:hover{
color:#FF0000;
text-decoration:underline;
}
 
a:active{
color:#FFCC00;
}

a:active{
color:#FFCC00;
}
 
a:hover{
color:#FF0000;
text-decoration:underline;
}

 

你可能会问， css是层叠样式表，那是否是就意味着写在后面的样式必定会覆盖前面的样式呢？