a:link、a:visited、a:hover、a:active伪类选择器

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

a:link：

说明：设置a对象在未被访问前的样式表属性

a:visited

说明：设置a对象在其链接地址已被访问过时的样式表属性

a:hover

说明：设置对象在其鼠标悬停时的样式表属性

a:active

说明：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性

定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序：a:link、a:visited、a:hover、a:active

a:hover实现导航栏

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.nav{text-align: center;}a{text-decoration: none;display: inline-block;width: 120px;height: 30px;/* background-color: pink; */background-image: url(../img/l.png);background-repeat: no-repeat;line-height:30px;background-size: contain;}a:hover{/* background-color: orange; */background-image: url(../img/h.png);color: yellow;}</style></head><body><div class="nav"><a href="#">今日热点</a><a href="#">今日热点</a><a href="#">今日热点</a><a href="#">今日热点</a><a href="#">今日热点</a><a href="#">今日热点</a></div></body>
</html>

其实这个CSS问题早有高人提出，他给总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。

再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .

a:link、a:visited、a:hover、a:active伪类选择器相关推荐

[css] 请写出:link、:visited、:hover、:active的执行顺序
[css] 请写出:link.:visited.:hover.:active的执行顺序 :link未访问链接:visited已访问的链接:hover鼠标悬停:active鼠标按下顺带一提,可交互式的组 ...
链接样式顺序：link、visited、hover、active
1.介绍 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻当设置为若干链路状态 ...
a链接的四种状态：link、visited、hover、active
a链接的四种状态伪类是CSS 用于向某些选择器添加特殊的效果. a标签中有四个:link.visited.hover.active (1)link-设置a对象在未被访问前的样式表属性. (2)vis ...
HTML中a:link,a:visited,a:hover,a:active
原文地址:http://www.cnblogs.com/yangfeng/archive/2009/07/25/1530962.html 1:解释 link:连接平常的状态 visited:连接被访问 ...
CSS中a标签样式原则 a:link a:visited a:hover a:active执行顺序
CSS为一些特殊效果准备了特定的工具,我们称之为"伪类".其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 代码如下: :link : ...
a:link,a:visited,a:hover,a:active 分别是什么意思?
link:链接平常的状态 active:链接被按下的时候 visited:链接被访问过之后 hover:鼠标放到链接上的时候具体一点就是: :hover版本:CSS1/CSS2 兼容性:IE4+ N ...
a:link a:visited a:hover a:active四种伪类选择器的区别
a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...
前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结锚伪类选择器:hover,:active,:visited;等用法总结一.什么是锚伪类在支持 CSS 的浏览器 ...
CSS :active 伪类
:active -- CSS :active 伪类,适用于一个元素被激活时的样式语法: :active CSS版本:CSS1 引用网址:http://www.dreamdu.com/css/pseu ...

a:link、a:visited、a:hover、a:active伪类选择器

a:link、a:visited、a:hover、a:active伪类选择器

a:link：

a:visited

a:hover

a:active

a:link、a:visited、a:hover、a:active伪类选择器相关推荐

最新文章

热门文章