提到 css 的hover 选择器,想必大家都不陌生(:hover 用于设置鼠标指向某元素上后显示的样式)
除了常用的 hover 选择器,还有3个可以和它搭配使用的选择器:
:link 设置未被访问页面的链接
:visited 用于设置已被访问的页面链接
:active 用于活动链接
一般 hover 某元素后,应该会显示设置的样式,如下面的"点我"。鼠标指上去后会显示设置的样式,这里为字体变成红色
问题:最近遇到一个问题,hover 以后的样式怎么都不生效,代码如下
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
a:hover {
color: red;
}
a:link {
color: #000;
} a:visited {
color: #ccc;
} a:active {
color: blue;
} a {
font-size: 30px;
}
</style>
</head> <body>
<a href="#">点我</a>
</body> </html>
开始我以为是代码写错了,仔细检查后,发现代码并没有错,这令我十分费解
后来无意中在w3c找到了答案,以前完全没有注意的一句话:
注:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效
这时候在看我上面的代码,hover 写在 link 和 visited 的前面,此刻茅塞顿开,修改后的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a:link {
color: #000;
}
a:visited {
color:#ccc ;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<!--被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)-->
<a href="#">点我</a>
</body>
</html>