本篇内容介绍了“CSS visited伪类选择器如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
首字母连起来是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色值。
css的三种引入方式
1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。
2.内嵌样式，就是将CSS代码写在之间，并且用进行声明。
外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上就可以了。其次就是导入样式，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，不建议使用。
“CSS visited伪类选择器如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
