这篇文章发布于 2018年10月12日,星期五,00:34,归类于 CSS相关。 阅读 22258 次, 今日 4 次 9 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8060
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。
昨天想使用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>
元素文字颜色就会直红色,如下截图示意:
于是,我们就可以下面这种方法实现访问过的链接文字后面跟一个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伪类选择器还有不少其他奇怪的特性。
三、没有半透明
使用:visited
伪类选择器控制颜色的时候,虽然语法上支持半透明色,但是表现上,要么纯色,要么全透明。
例如:
a { color: blue; } a:visited { color: rgba(255,0,0,.5); }
结果不是半透明红色,而是纯红色,完全不透明。
四、只能重置,不能凭空设置
请问下面这段CSS,访问过的<a>
元素会有背景色吗?
a { color: blue; } a:visited { color: red; background-color: gray; }
HTML为:
<a href="">有背景色吗?</a><
答案是不会有背景色,如下截图:
因为:visited
伪类选择器中的色值只能重置,不能凭空设置。
我们修改成下面这样就可以了:
a { color: blue; background-color: white; } a:visited { color: red; background-color: gray; }
此时,文字效果如下截图:
也就是默认需要有一个背景色,这样: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色值。
如下截图示意:
六、回忆完毕
总之,:visited
伪类选择器是一个有很多“怪癖”的选择器,如果按照:hover
或者:active
这类选择器的表现理解之,一定会不知所然,因为太多特性不支持,太多表现不合常规理解。
究其原因,我猜100%是出于安全考虑,如果浏览器可以通过JS或者其他行为表现知道你已经访问过哪些链接,我靠,那隐私直接就暴露了呀,肯定是不行的,所以,如果你想借助:visited
伪类选择器搞些花头,我劝大家还是死了这条心,老老实实搬砖吧。
另外,:visited
的怪异特性应该还有其他一些,欢迎大家进行补充。
感谢阅读!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8060
(本篇完)
- 获取元素CSS值之getComputedStyle方法熟悉 (0.478)
- 伪类+js实现CSS3 media queries跨界准确判断 (0.478)
- 内容loading加载后高度变化CSS3 transition体验优化 (0.478)
- Canvas中颜色过渡动画效果的实现 (0.478)
- 如何在HTML和JS中设置和获取var CSS变量 (0.478)
- 快速了解CSS新出的列选择符双管道(||) (0.317)
- 周知:CSS -webkit-伪元素选择器不再导致整行无效 (0.302)
- 小tip:CSS计数器+伪类实现数值动态计算与呈现 (0.282)
- 如何在CSS中实现父选择器效果? (0.282)
- 详细了解CSS :focus-within伪类及其交互应用 (0.282)
- CSS border三角、圆角图形生成技术简介 (RANDOM - 0.020)
听了hax的题特意过来补课
半透明、字体阴影等属性的支持性被拿掉恐怕是之前 pixel perfect timing attack 的缘故,是跟安全相关的改动。
https://www.contextis.com/en/resources/white-papers/pixel-perfect-timing-attacks-with-html5
球球你换个投降吧
好一个由爱生恨
写的不错
旭哥可以搞个公众号,有新文章直接推送给关注的粉丝,不搞可以先把名称占用了,我看公众号已经有同名的了。
最近刚开始更新,不过目前只更新技术人文类的文章。二维码图片地址://image.zhangxinxu.com/image/blog/201810/qrcode_for_zxx.jpg
已关注~
沙发