a标签伪类的顺序

在一次开发项目中,我用a链接来做效果,测试的时候发现,a:hover被点击后的效果就不再了!我百度才知道,原来在css写a链接也是有顺序之分的。

顺序应该是:

a:link a标签还未被访问的状态;

a:visited a标签已被访问过的状态;

a:hover 鼠标悬停在a标签上的状态;

a:active a标签被鼠标按着时的状态;

本质就是“同等优先权的样式,写在后边的会覆盖前边”,a标签的伪类只不过是又结合了不用的动作顺序,动作的触发顺序决定了伪类的顺序。

因为前2者两种状态是常态,而后2者是即时状态,当即时状态触发时,要覆盖常态,所以2个即时状态要放在后边。

时间: 2024-07-28 14:42:07

a标签伪类的顺序的相关文章

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标签伪类的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 修改排序后的代码:

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"&

&lt;a&gt;链接的四个伪类顺序

摘自: http://www.cnblogs.com/xiayi/p/5350423.html <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类,但它确实作为一个类来使用.(这些类确实存在,浏览器在后台会向这些类增加和删除元素) 我在看<CSS设计指南>时,它说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果. 也即这样写: a:

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

css中的伪类

1.伪类的语法 selector:pseudo-class {property:value;} 对应的中文:选择器:伪类{属性:值:} 2.anchor伪类 1 <style type="text/css"> 2 /*anchor伪类的顺序是固定的,不变的*/ 3 /*未访问时的样式*/ 4 a:link{color: black;} 5 /*访问过后的样式*/ 6 a:visited{color: pink;} 7 /*鼠标划过时的样式*/ 8 a:hover{color

css(二)css选择器,伪类

前戏 前面我们说过CSS规则由选择器和声明组成,我们要给标签设置属性,那我们就要找到对应的标签,CSS选择器可以帮我们找到我们需要的标签 css选择器有: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器 标签选择器 标签选择器前面我们用过,它是以HTML标签作为选择器 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type&qu