当前位置:首页 > 开发 > Web前端 > 前端 > 正文

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

发表于: 2014-08-04   作者:陌上花会开   来源:转载   浏览:
摘要: CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究。 :link 与 :visited 在样式文件中的顺序可以随便放置。 而focus, hover,active这几个,如果你设置的顺序不同,会直接影响样式的显示效果,下面会详细解释。 :focus -> :h

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

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

focus, hoveractive这几个,如果你设置的顺序不同,会直接影响样式的显示效果,下面会详细解释。

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

大家可以看另一篇教程:CSS中选择器优先级顺序实战讲解

欢迎大家加入互联网技术交流群:62329335

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
  最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧。之前做页
--创建 CREATE public database link test_link CONNECT TO scott IDENTIFIED BY tiger using '(DES
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link
.Net提供了专用类操作AD,本文详细介绍使用C#操作AD的方法。 一、系统环境 系统环境:Windows Serve
附件下载(源代码+安装文件+教程) 0. 前言 ActiveX控件以前也叫做OLE控件或OCX控件,它是一些软件
  先说一说两者之间的异同   两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@imp
实战详解域信任关系 上篇博文中我们对域信任关系作了一下概述,本文中我们将通过一个实例为大家介绍
Files are arranged in directories (or folders if you prefer that term), and each file can be
转自:http://ued.taobao.com/blog/2007/03/05/ie6-hover-bug/ 如上图,在制作数码热销排行的页面时
转自:http://ued.taobao.com/blog/2007/03/05/ie6-hover-bug/ 如上图,在制作数码热销排行的页面时
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号