:link,:visited,:focus,:hover,:active详解-阿里云开发者社区

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

2014-09-06 904

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 原文::link,:visited,:focus,:hover,:active详解CSS 又名层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，各样式排列的顺序很有讲究。 :link 与 :visited 在样式文件中的顺序可以随便放置。

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是层叠样式表，那是不是就意味着写在后面的样式一定会覆盖前面的样式呢？

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