:link、:hover、:active和:visited的区别
前言
直到如今,前端一直都是我的弱项,想要总结自己前端都学了什么,可是真的想写的时候,却发现自己会的真的是好少。既然如此,就随性一点,想到哪里记到哪里吧。
首先,这四个选择器叫伪类选择器,一般用在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、总结
以上就是我对四个伪类选择器的理解,如有不对之处,希望诸君不吝赐教。
版权声明:本文出自孤星卟哭的博客,原创文章,转载请注明出处。 https://blog.csdn.net/zcy92949/article/details/80074839
:link、:hover、:active和:visited的区别相关推荐
- 【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...
- 前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结 锚伪类选择器:hover,:active,:visited;等用法总结 一.什么是锚伪类 在支持 CSS 的浏览器 ...
- 锚伪类link、hover、active、visited
锚点伪类 锚点链接的伪类主要针对于我们a标签样式进行设置,下面给出四个标签作用 link标签:未被访问过的链接 hover 应用于鼠标悬停到的元素 active 应用于被激活的元素 visited 应 ...
- :link,:visited,:focus,:hover,:active详解
CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置. 而focus, ho ...
- 同时设置伪类样式a:link和a:visited,a:link样式被a:visited样式覆盖问题
根据爱恨原则,正常书写顺序如下 :link :visited :hover :active 问题 同时设置伪类样式 a:link 和 a:visited ,在超链接未被访问时,a:link 样式无效, ...
- html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
- hover前有无空格的区别
hover前加不加空格的区别 问题描述 在使用hover时开始没有注意空格的影响,以至于达不到理想的样式,后通过学习发现hover前加不加空格是有区别的. 不加空格 .card:hover{curso ...
- 注解之@link与@see的使用与区别
为了让代码更清晰,我们经常使用注解.但是有些注解需要依赖其他字段或类来继续说明.这样,有个链接的话就非常方便,比如参数另一个类中的有相同前缀名的字段. 这种注释有两种, @see和{@link} 经常 ...
- django用户状态Active和Staff status区别
Staff status:能登录admin后台没问题 Active啥意思记得是能登录非admin的前台页面,今天确认了下就是这样. 可以拿这个既能用户前台登录又能管理员后台登录的django开源博客系 ...
最新文章
- Spring读书笔记——bean创建(下)
- POJ2570 二进制,位运算,Floyd
- 卷积转换为矩阵运算中填充数的计算-GEMM
- FastText情感分析和词向量训练实战——Keras算法练习
- Understanding JVM Internals---不得不转载呀
- ROBOMASTER 2018机甲大师赛 南部赛区三等奖!
- VS code 使用 Remote-SSH 进行python远程开发
- ansible模块介绍
- 检查Linux服务器受到DDOS攻击
- TensorFlow入门篇(一):搭建简单的线性拟合例子
- 浅谈跨平台框架 Flutter 的优势与结构 1
- 9种排序算法 3_希尔排序
- Java实现图书管理系统(新手友好)
- MAC 用配置设置解决vscode中文乱码问题
- stagefright 流程解析
- 【Python】利用MD5文件去重
- PDF太大怎么办?缩小PDF的4种常用方法
- 火爆互动小游戏源码接入方法,需要的产品人请查收
- Java 找水仙花数
- .net 必看书籍1