今天小编跟大家讲解下有关CSS :visited伪类选择器隐秘往事回忆录 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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> 元素文字颜色就会直红色 如下截图示意：
于是 我们就可以下面这种方法实现访问过的链接文字后面跟一个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 的怪异特性应该还有其他一些 欢迎大家进行补充。
总结
以上所述是小编给大家介绍的CSS :visited伪类选择器隐秘往事回忆录 希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！
来源：爱蒂网
