css伪类的展现
2024-10-18 03:37:43
常见的伪类选择器
:link
:hover
:active
:visited
如果为以上几个伪类赋予相同css属性名,不同的css属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css测试</title>
<style type="text/css">
a:link { color: yellow; }
a:hover { color: red; }
a:active { color: pink; }
a:visited { color: blue; }
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下你就知道</a>
</body>
</html>
如果按照以上的顺序给a标签的伪类赋值,第一次点击颜色展现是没有问题的,但是当点击过后,第二次再次将鼠标移到标签上面,以及点击的时刻颜色都是没有变化的,这是因为:hover
和:active
被visited
覆盖的缘故,那为什么会出现这种情况?
因为
:link
,:hover
,:active
,:visited
的权重都是0,0,1,0
,第一次点击的时候,visited因为还没有触发,所以颜色显示一切正常,第二次点击的时候,visited已经生效,而且他们的权重都是相等的,所以处在最后的visited伪类会将前面的几个伪类的属性值给覆盖掉。那颜色也就会一直是visited的颜色了。
此刻,我们只需将上面代码几个伪类的顺序调换一下,一切就都解决了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css测试</title>
<style type="text/css">
a:link { color: yellow; }
a:visited { color: blue; }
a:hover { color: red; }
a:active { color: pink; }
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下你就知道</a>
</body>
</html>
因为,访问过的链接默认展示的是
:visited
伪类的属性值,所以不会被覆盖,而后鼠标移动到链接上,展示的是:hover
伪类的属性值,而后点击展示的是:active
的属性值,颜色顺序完全正确。
最新文章
- AutoMapper:Unmapped members were found. Review the types and members below. Add a custom mapping expression, ignore, add a custom resolver, or modify the source/destination type
- Firefox Portable Developer 52.0.0.6176-6178
- 使用Robomongo 连接MongoDB 3.x 报 Authorization failed 解决办法(转)
- img标签src=";";和background-image:url();引发两次请求页面bug
- MongoDB 3.0 用户创建
- eclipse 条件断点的使用
- git的某些默认行为--会推送pull的内容,即使commit的时候不显示
- javaScript定义对象的方法
- USACO3.42American Heritage(二叉树)
- EPiServer网文
- Tsung测试Tcp协议的应用或接口
- 版本控制工具--svn和git的使用(一) -----版本控制的好处以及分类
- iOS中使用iCloud一些需要注意的地方(Xcode7.2)
- VS2015右键集成TortoiseGit
- C++版 - 剑指offer 面试题7:用两个栈实现队列 题解
- PHP合并数组及去重
- Js闭包学习笔记
- Kubernetes工作流之Pods二
- django 的ajax 请求,使用form的验证机制。
- [/usr/local/openssl//.openssl/include/openssl/ssl.h] Error 127