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

转载于:https://www.cnblogs.com/umylover/p/3949091.html

:link,:visited,:focus,:hover,:active详解相关推荐

css 的 hover属性详解
css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素.同级元素.相邻元素的样式 .hover 属性可以应用于任何元素,不仅仅是链接 .使用 hover ...
apache伪静态把css 排除掉_（02）CSS 选择器详解 | CSS
原创:itsOli @前端一万小时本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 伪类选择器有哪些?2. ...
CSS样式的状态hover、focus、active、link、visited详解
CSS 又名层叠样式表,是一种伪类用于向某些选择的容器添加特殊的效果,所谓层叠,就是后面的样式会覆盖前面的样式,所以不同的排列顺序可能会有不同的显示效果.下面介绍几个关于连接按钮效果的关键样式属性: ...
CSS visited，hover，active , focus这四个区别
CSS伪类用于向某些选择器添加特殊的效果,在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置. :focus,: hover,:active这几个 ...
【网络通信】详解NIO、select
前言本文地址:https://blog.csdn.net/hancoder/article/details/108899013 推荐视频: NIO多路复用+系统调用整合讲解:https://www. ...
伪类link,visited,hover,focus,active
CSS 又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中, 各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置.而focus, ho ...
hover、focus、active、link、visited状态 CSS
hover.focus.active.link.visited状态 CSS 这几个是按钮链接效果的样式属性,不同的排列顺序可能会有不同的展示效果,我们先来看他们分别是干嘛的 link:控制未访问时的显 ...
[css] 请写出:link、:visited、:hover、:active的执行顺序
[css] 请写出:link.:visited.:hover.:active的执行顺序 :link未访问链接:visited已访问的链接:hover鼠标悬停:active鼠标按下顺带一提,可交互式的组 ...
CSS中a标签样式原则 a:link a:visited a:hover a:active执行顺序
CSS为一些特殊效果准备了特定的工具,我们称之为"伪类".其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 代码如下: :link : ...

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

:link,:visited,:focus,:hover,:active详解相关推荐

最新文章

热门文章