码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式中visited,hover,active , focus这四个分别表示什么意思?

时间:2017-06-13 12:51:00      阅读:3262      评论:0      收藏:0      [点我收藏+]

标签:选择器   伪类   就会   元素   focus   超链接   文件   顺序   选择   

CSS伪类用于向某些选择器添加特殊的效果。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之后,覆盖了前面的样式。

CSS样式中visited,hover,active , focus这四个分别表示什么意思?

标签:选择器   伪类   就会   元素   focus   超链接   文件   顺序   选择   

原文地址:http://www.cnblogs.com/cnundefined/p/7000273.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!