a标签伪类的LOVE HATE原则

a标签有四个伪类，分别是：

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移动到链接上

a:active 选定的链接

遇到的问题：

访问过的链接，始终显示点过的样式，鼠标滑过或者点击时都不会有样式变动，具体css样式如下：

查询后知道a标签伪类有一个排序规则，否则会影响到显示。

解决方案：

按照LOVE HATE排序的顺序进行伪类排序。

即L(link)OV(visited)E H(hover)A(active)TE

修改排序后的代码：

时间： 2024-12-18 10:26:23

a标签伪类的LOVE HATE原则的相关文章

a标签伪类顺序以及jQuery选择器

Q:a标签伪类的顺序? A:顺序应该是: :link :visited :hover :avtice 原因:link和visited是a标签的常态属性,hover和active是a标签的即时状态. Q:jQuery选择器?如何准确快速的选择出想要的元素? A: 在用jQuery的时候,一个很重要的用法,就是要快速选择出自己想要的元素.把常用的选择记录下来: 基本选择器 ID选择器 $("#id").css("width","120px"); Cl

a标签伪类的顺序

在一次开发项目中,我用a链接来做效果,测试的时候发现,a:hover被点击后的效果就不再了!我百度才知道,原来在css写a链接也是有顺序之分的. 顺序应该是: a:link a标签还未被访问的状态: a:visited a标签已被访问过的状态: a:hover 鼠标悬停在a标签上的状态: a:active a标签被鼠标按着时的状态: 本质就是“同等优先权的样式,写在后边的会覆盖前边”,a标签的伪类只不过是又结合了不用的动作顺序,动作的触发顺序决定了伪类的顺序. 因为前2者两种状态是常态,而后2者

a标签伪类的书写顺序

L(link)OV(visited)e-H(hover)A(active)te 简单的介绍一下A 标签的4个伪类: 1. ':link' :适用于未被访问的链接: 2. ':visited' :适用于已经访问过的链接: 3. ':hover' :在可视化客服端上,适用于光标(鼠标指针)指向一个元素,但还未激活它时: 4. ':active' :适用于一个元素被用户激活时. W3C制定的CSS21规范中指出:这四个伪类的声明顺序应该是:':link'.':visited'.

html 超链接标签锚点 a标签伪类

一个简易的连接 <a href="01.html">01</a> <body> <a href="01.html" target="_blank">01</a> <a href="https://www.bilibili.com/?spm_id_from=666.7.primary_menu.1"> B站</a> <a href=&quo

a标签伪类：visited下划线设置无效的原因及如何解决

今天第一次加入了个前端群,作为一名萌新,看到有群友提问"怎样取消a点击后的下划线?",顿感这不是很简单的问题嘛,于是抢答"a:visited{text-decoration:none;}",谁料这是无效的!源码(浏览器为chorme53.0.2785.143): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

背景图+列表+伪类选择器

Background-color|image|position|repeat 颜色图片位置重复图片优先 CSS Sprites雪碧图:减少http请求,减小服务器压力.一张大图,通过背景偏移position截取小图. Li列表 list-style list-style-image list-style-position list-style-type <a>标签伪类选择器 link 未访问 visited 已访问 hover 悬停可用于其他元素 active 点击可用于其他元素

Day 47（08/02）选择器、伪类

属性选择器 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略. 比如"[cheacked]".以下同.) p[title] { color:#f00; } E[att=val] 匹配所有att属性等于"val"的E元素 div[class="error"] { col

学习——伪类+js实现css3 media queries跨界准确判断

本文转自:http://www.zhangxinxu.com/wordpress/?p=2387 media queries可以让设备在不同尺寸下应用不同的css样式.布局等.以适应手持设备.普屏显示器.宽屏显示器,以及未来冰箱上的联网显示器,汽车上的数码设备等.然后,仅仅通过css做布局可能无法应对所有的交互请求. 举个简单的例子,我们打开浏览器可能处于非最大化状态,此时,如果作为普屏处理,加载的图片可能就是128*128的小尺寸图片.但是,当我们最大化以获得更好阅读体验的时候,需要使用更大尺

a 标签的伪类的正确顺序，以及原因

注意,a 标签的伪类是有顺序的,否则有可能样式不对:lvha, 原因:浏览器的就近原则,举个例子: 我定义的顺序是a:visited.a:hover.a:link,这时候就会发现,不管我有没有hover上去,样式都是link的样式的,这是因为鼠标经过的未访问链接同时拥有a:link.a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义. 所以,如果一个链接没有被访问过,那么它有可能同时拥有 link , hover 两个属性,