版权声明:本文出自孤星卟哭的博客,原创文章,转载请注明出处。 https://blog.csdn.net/zcy92949/article/details/80284375
前言
直到如今,前端一直都是我的弱项,想要总结自己前端都学了什么,可是真的想写的时候,却发现自己会的真的是好少。既然如此,就随性一点,想到哪里记到哪里吧。
首先,这四个选择器叫伪类选择器,一般用在a标签中的样式,如果想要四个一起用,首先需要考虑的是顺序问题(4×3×2×1=24种可能),正确的顺序有好几种,当初我的老师教我一种容易记住的排列方式,就是我标题这样的顺序,理由如下:
(小技巧:有一天我走在路上,捡到一个lv的包,我就很开心,笑haha。l在头,v在尾,ha依次在中间)
推荐大家用谷歌浏览器调试前端样式,因为谷歌浏览器很适合IT,至于其他浏览器(如IE6等)对于这四个伪类选择器的兼容问题,本文不讨论,到此,言归正传,老规矩,在代码中学习知识。
1、:link、:hover、:active和:visited的区别?
:link表示鼠标点击之前,也称为原始状态
:hover表示鼠标悬停状态
:active表示鼠标点击状态
:visited表示鼠标点击之后状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>isolated star学习四个伪类选择器</title>
<style type="text/css">
/*点击之前*/
a:link {
background-color: red;
}
/*鼠标悬停状态*/
a:hover {
background-color: green;
}
/*点击状态*/
a:active {
background-color: blue;
}
/*点击之后状态*/
a:visited {
background-color: gray;
}
/*改变文字的默认颜色以及消除下划线*/
a{
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<!--伪类元素选择器(原始状态[:link];鼠标悬停状态[:hover];点击状态[:active];点击之后[:visited])-->
<a href="http://www.aimacademy.cn/" target="_blank">点击进入爱玛学院</a>
</body>
</html>
运行结果截图:
说明:背景颜色改变顺序如上图,为了消除视觉影响,这里把文字都统一成白色。
不过有一个最大的问题是,当你刷新页面,样式会停留在最后一张图片,当时我傻傻的以为这是因为visited不能和其余三个一起用,其实真相并非如此,这是浏览器的缓存机制,这里只需要清除一下缓存就可以了,如图:
2、总结
以上就是我对四个伪类选择器的理解,如有不对之处,希望诸君不吝赐教。