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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    a:visited{ text-decoration: none; }   </style> </head><body>  <a href="https://www.baidu.com">面向编程</a> </body></html>

后又在FF上实验了一下也是如此,a:visited伪类文本装饰失效是为什么呢?怀着迷茫的心情我运用面向Baidu编程技术借鉴前人经验,发现也有很多人曾对此提出疑问,有些人说是浏览器缓存结果,有的说是lvha伪类层叠效果(跟这无关,我曾严格按照这个关系实验仍无效)导致,最后我找到了一部分webkit关于a:visited的文字:

  WebKit is prone to an information-disclosure vulnerability. This issue occurs when Cascading Style Sheets (CSS) use the ‘:visited‘ pseudo-class. Attackers   may determine which sites a user has visited.

  NOTE: This issue was previously covered in BID 40620

(Apple Safari Prior to 5.0 and 4.1 Multiple Security Vulnerabilities) buthas been given its own record to better document it.

  Both the next release versions of Gecko (tentatively named Firefox 3.7) and WebKit (Safari 5) will
  implement changes to the handling of the :visited pseudo-class. Google Chrome will, I suppose, also
  implement this.

  In short, those browsers will limit the ways the a:visited state can be styled. Color,
  background-color, and to some extend, outline, border are not affected, as long as you don‘t use
  alpha-transparency (rgba()), change the border-style or border-width, etc. Other changes will be
  ignored and fall back to what is specified for the a:link state.

其大意就是a:visited伪类可能会暴露用户浏览信息记录,攻击者可能会据此判断用户曾经访问过的网站,造成不必要的损失,因此这些浏览器决定限制a:visited的功能,所以不是代码的问题,而是浏览器方面的限制。

所以,若是用下划线来判断某链接是否曾被点击过是失效的,那么我们就只能通过设置颜色来区别了,这时候我们就要严格遵从lvha规则了。但在写小demo学习时又会发现有时候页面在经过改动后刷新会自动显示链接的颜色为:visited设置中的颜色,这是因为浏览器缓存的原因,在做小demo时可采用头部meta编码使其不再保留缓存:

<meta   http-equiv="Expires"   CONTENT="0">
<meta   http-equiv="Cache-Control"   CONTENT="no-cache">
<meta   http-equiv="Pragma"   CONTENT="no-cache">

以便测试。

时间: 2024-12-28 23:49:59

a标签伪类:visited下划线设置无效的原因及如何解决的相关文章

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

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标签伪类的顺序

在一次开发项目中,我用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'.

Python 的类的下划线命名有什么不同?

1,以一个下划线开头的命名 ,如_getFile2,以两个下划线开头的命名 ,如__filename3,以两个下划线开头和结尾的命名,如 __init__()4,其它这些命名有什么不同吗 首先是单下划线开头,这个被常用于模块中,在一个模块中以单下划线开头的变量和函数被默认当作内部函数,如果使用 from a_module import * 导入时,这部分变量和函数不会被导入.不过值得注意的是,如果使用 import a_module 这样导入模块,仍然可以用 a_module._some_var

python:类5——Python 的类的下划线命名有什么不同?

首先是单下划线开头,这个被常用于模块中,在一个模块中以单下划线开头的变量和函数被默认当作内部函数,如果使用 from a_module import * 导入时,这部分变量和函数不会被导入.不过值得注意的是,如果使用 import a_module 这样导入模块,仍然可以用 a_module._some_var 这样的形式访问到这样的对象. 在 Python 的官方推荐的代码样式中,还有一种单下划线结尾的样式,这在解析时并没有特别的含义,但通常用于和 Python 关键词区分开来,比如如果我们需

Python的类的下划线命名的区别

首先,单下划线开头,这个常被用于模块中,在一个模块中以单下划线开头的变量和函数被默认当做内部函数,如果使用from  module  import  *导入时,这部分变量和函数不会被导入.注意,如果使用import module导入模块,仍然可以用module._some_var这样的形式访问到这样的对象. 在Python官方推荐的代码样式中,还有一种单下划线结尾的样式,这在解析时并没有特别的含义,但通常用于和Python关键词区分开来,比如,如果我们需要一个变量叫做class,但class是P

如何去掉a标签的下划线

首先来了解下<a>标签的一些样式: <a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符包括: 总: a 表示所有状态下的连接 如 a{color:red} ① a:link:未访问链接 ,如 a:link {color:blue} ② a:visited:已访问链接 ,如 a:visited{color:blue} ③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 a:activ