网页制作 
首页 > 网页制作 > 浏览文章

CSS :visited伪类选择器隐秘往事回忆录

(编辑:jimmy 日期: 2024/12/31 浏览:3 次 )

CSS :visited伪类选择器隐秘往事回忆录

昨天想使用 a:visited 改变右侧“猜你喜欢”已访问过的文字颜色,发现改来改去效果都一般,想到还有其他几个CSS可以设置,与颜色相关的,结果,太久没使用这个伪类选择器,具体那几个支持的CSS一下子记不得了,发现有必要自己整理记录下。

一、由爱生恨

链接4伪类(后两个伪类后来拖拽到几乎所有HTML标签元素)如果同时使用,其顺序是这样的: :link → :visited → :hover → :active 。

首字母连起来是LVHA,顺序完全符合love-hate,也就是爱恨,所谓由爱生恨,这样顺序就记住了。

目前这个年代, :link 这个伪类用得已经不多了,但作用还是有的,我们平时用得比较多的都是直接设置 <a> 元素的颜色,例如:

a { color: blue; }

实际上,下面这种要更合适,更规范:

a:link { color: blue; }

两者有什么区别呢?

区别在下面,下面两个 <a> 元素,前者可以匹配 a:link 选择器,但后者却只能匹配 a 选择器:

<a href="##">文字</a>
<a>文字2</a>

例如我很喜欢移除 href 属性表示 <a> 元素按钮的禁用态,使用 a:link 禁用和非禁用的CSS就更好控制了。

只是我们使用 a:link 选择器的时候, a:visited 选择器也一定要设置(因为 a:link 在最前面),不然访问过的链接颜色就会跟着系统或者当前元素设置的 color 走,表现反而有些乱,因此,当下已经很少见到使用 :link 伪类选择器的了。

而 :visited 伪类选择器依然很有用,尤其在列表式链接站点,例如文章列表,章节列表,可以让用户知道这篇文章我已经看过了,算是比较友好的一种体验处理。

二、:visited伪类选择器支持CSS很有限

或许是出于安全考虑, :visited 伪类选择器支持CSS很有限,目前仅支持下面这些CSS: color , background-color , border-color , border-bottom-color , border-left-color , border-right-color , border-top-color , column-rule-color 以及 outline-color 。

同时,类似 ::before , ::after 这些伪元素都不支持,例如,我们希望使用文字标示已经访问过的链接,如下:

a:visited::after{content:'visited';}  // 注意,不支持

不好意思,想法虽好,但没有任何浏览器支持,请死了这条心。

不过好在 :visited 伪类支持子选择器,不过,所能控制的CSS属性和 :visited 一模一样,就那几个和颜色相关的CSS属性,也不支持 ::before , ::after 这些伪元素。

例如:

a:visited span{color: red;}
<a href="">文字<span>visited</span></a>

如果链接是浏览器访问过的,则 <span> 元素文字颜色就会直红色,如下截图示意:

CSS :visited伪类选择器隐秘往事回忆录

于是,我们就可以下面这种方法实现访问过的链接文字后面跟一个visited字样。HTML如下:

<a href="">文字<small></small></a>

CSS如下:

small { position: absolute; color: white; } // 这里设置color: transparent无效
small::after { content: 'visited'; }
a:visited small { color: purple; }

CSS :visited伪类选择器隐秘往事回忆录

除了支持的CSS有限,:visited伪类选择器还有不少其他奇怪的特性。

三、没有半透明

使用 :visited 伪类选择器控制颜色的时候,虽然语法上支持半透明色,但是表现上,要么纯色,要么全透明。

例如:

a { color: blue; }
a:visited { color: rgba(255,0,0,.5); }

结果不是半透明红色,而是纯红色,完全不透明。

CSS :visited伪类选择器隐秘往事回忆录

四、只能重置,不能凭空设置

请问下面这段CSS,访问过的 <a> 元素会有背景色吗?

a { color: blue; }
a:visited { color: red; background-color: gray; }

HTML为:

<a href="">有背景色吗?</a>

答案是不会有背景色,如下截图:

CSS :visited伪类选择器隐秘往事回忆录

因为 :visited 伪类选择器中的色值只能重置,不能凭空设置。

我们修改成下面这样就可以了:

a { color: blue; background-color: white; }
a:visited { color: red; background-color: gray; }

此时,文字效果如下截图:

CSS :visited伪类选择器隐秘往事回忆录

也就是默认需要有一个背景色,这样 :visited 的时候才有有背景色呈现

五、:visited设置并呈现的色值无法获取

也就是说,当文字颜色值表现为 :visited 选择器设置的颜色值的时候,我们使用JS的getComputedStyle()是获取不到这个颜色值的。

已知CSS如下:

a { color: blue; }
a:visited { color: red; }

并且我们的链接表现为红色,此时我们运行下面的JavaScript代码:

window.getComputedStyle(document.links[0]).color;

结果输出的是: "rgb(0, 0, 255)" ,也就是蓝色blue对应的RGB色值。

如下截图示意:

CSS :visited伪类选择器隐秘往事回忆录

六、回忆完毕

总之, :visited 伪类选择器是一个有很多“怪癖”的选择器,如果按照 :hover 或者 :active 这类选择器的表现理解之,一定会不知所然,因为太多特性不支持,太多表现不合常规理解。

究其原因,我猜100%是出于安全考虑,如果浏览器可以通过JS或者其他行为表现知道你已经访问过哪些链接,我靠,那隐私直接就暴露了呀,肯定是不行的,所以,如果你想借助 :visited 伪类选择器搞些花头,我劝大家还是死了这条心,老老实实搬砖吧。

另外, :visited 的怪异特性应该还有其他一些,欢迎大家进行补充。

总结

以上所述是小编给大家介绍的CSS :visited伪类选择器隐秘往事回忆录,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

上一篇:基于 CSS 动画的 SVG 按钮实例代码
下一篇:让 Chrome 崩溃的一行 CSS 代码
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?