CSS 动态超链接样式 LVFHA 或 LVHFA

在HTML中，通过 a 元素来定义超链接，并通过 a 元素的 href 属性来定义链接的目标地址。

<a href = "http://www.www.waibo">歪脖网</a>

默认情况下，超链接是蓝色字体并带有下划线，被访问后，链接文本会变为紫色并且也带有下划线。并且，默认的链接样式平淡无奇，通过CSS，可以设置超链接的各种属性，如字体、颜色、背景等，并结合链接伪类，便可以实现各种各样的动态链接效果。

对链接应用样式最容易，也是最简单的方式，就是使用元素选择器。如，以下规则是所有的锚文本都显示为红色，并去掉链接的下划线。

a {
color: red;
text-decoration: none;
}

但是，这样定义链接之后，页面上的所有链接都变成了红色，也无法区分哪些链接是已经访问过的，哪些是没有被访问过的。

为了避免这个问题，CSS提供了链接伪类选择器，用来寻找处于不同状态的链接。:link伪类选择器寻找未被访问过的链接，:visitd 伪类选择器寻找已被访问过的链接。所以，下面代码中，所有没有被访问过的链接将是红色，所有被访问过的路径将是紫色。

a:link {
color: blue;
}
a:visited {
color: purple;
}

这时，就可以为链接应用 :hover 和 :active 这两个动态伪类选择器。:hover寻找鼠标悬停的元素，:active 寻找被激活的元素，对于链接，激活发生在鼠标已经按下、还没有释放的时候。

a:hover, a:active {
color: red;
}

另外，动态伪类选择器也可以连在一起使用，以创造更丰富的样式，如定义已被访问链接的悬停效果。

a:visited:hover {
color: #888;
}

为了尽可能提高页面的可访问性，在定义鼠标悬停状态时，最好为链接定义 :focus 伪类选择器，以便用户通过键盘移动到链接上时，链接的样式与鼠标悬停时的样式相同。:focus 伪类选择器，会寻找获得焦点的元素。

a:hover, a:focus, a:active {
color: red;
}

默认情况下，浏览器会为链接添加下划线，而人们常常习惯于去掉未访问和已访问链接的下划线，当悬停、获得焦点、激活时，再为链接添加下划线。

a:link, a:visited {
text-decoration: none;
}
a:hover, a:focus, a:active {
text-decoration: underline;
}

定义链接样式时，选择器的顺序非常重要，如果上面的顺序反过来，悬停和激活的样式就不起作用了。根据样式层叠规则，当两个规则具有相同的特殊性时，后定义的规则会覆盖先定义的规则，所以，a:link 和 a:visited 样式将覆盖 a:hover，a:focus，a:active 样式。

于是，为了确保不会发生这种情况，一定要按照 LVFHA 的顺序定义链接的样式，即按照link（L）、visited（V）、focus（F）、hover（H）、active（A）的书写顺序。也有人提议使用LVHFA 的顺序，这也是可行的。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 动态超链接样式 LVFHA 或 LVHFA相关推荐

CSS中超链接样式的书写顺序
CSS中超链接样式的书写顺序超链接有四种样式: a.link{} /* 正常情况下的样式 */ a.visited{} /* 已访问过的样式 */ a.hover{} /* ...
html超链接样式顺序,超链接4个伪类 CSS定义超链接样式有什么顺序
超链接的伪类有哪些?分别表示什么含义 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:ho ...
CSS（十一）——用CSS设置超链接样式
目录 1.使用CSS伪类别来设置超链接样式 1.1普通的.未被访问的链接 1.2用户已访问的链接
CSS设置超链接样式常用
伪类名称含义示例 a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;} a:visited 单击访问后超链接样式 a:visited {color:#333;} a: ...
CSS设置超链接样式
转自:https://blog.csdn.net/fighting_0808/article/details/81782348
怎么设置超链接网址css,css应该怎么设置超链接样式
css设置超链接样式的方法是,给超链接添加伪类,例如[a:visited {color:#00FF00;}].[a:visited]表示用户已经访问过的链接. 本文操作环境:windows10系统.c ...
css如何设置超链接样式
css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性. (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性. (3) :hover:设置 ...
CSS设置动态超链接
CSS设置动态超链接 HTML中,超链接是通过标记<a>实现的,具体的地址使用标记<a>的href属性. <ahref="http://blog.csdn.ne ...
CSS超链接样式，去除下划线等
控制超链接样式链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...

CSS 动态超链接样式 LVFHA 或 LVHFA

CSS 动态超链接样式 LVFHA 或 LVHFA相关推荐

最新文章

热门文章