CSS visited伪类选择器如何使用


本篇内容介绍了“CSS visited伪类选择器如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首字母连起来是LVHA,顺序完全符合love-hate,也就是爱恨,所谓由爱生恨,这样顺序就记住了。目前这个年代, :link 这个伪类用得已经不多了,但作用还是有的,我们平时用得比较多的都是直接设置 元素的颜色,例如:a { color: blue; }实际上,下面这种要更合适,更规范:a:link { color: blue; }两者有什么区别呢?区别在下面,下面两个 元素,前者可以匹配 a:link 选择器,但后者却只能匹配 a 选择器:例如我很喜欢移除 href 属性表示 元素按钮的禁用态,使用 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 这些伪元素。例如:如果链接是浏览器访问过的,则 元素文字颜色就会直红色,如下截图示意:于是,我们就可以下面这种方法实现访问过的链接文字后面跟一个visited字样。HTML如下:CSS如下:除了支持的CSS有限,:visited伪类选择器还有不少其他奇怪的特性。三、没有半透明使用 :visited 伪类选择器控制颜色的时候,虽然语法上支持半透明色,但是表现上,要么纯色,要么全透明。例如:结果不是半透明红色,而是纯红色,完全不透明。四、只能重置,不能免费云主机域名凭空设置请问下面这段CSS,访问过的 元素会有背景色吗?HTML为:答案是不会有背景色,如下截图:因为 :visited 伪类选择器中的色值只能重置,不能凭空设置。我们修改成下面这样就可以了:此时,文字效果如下截图:也就是默认需要有一个背景色,这样 :visited 的时候才有有背景色呈现五、:visited设置并呈现的色值无法获取也就是说,当文字颜色值表现为 :visited 选择器设置的颜色值的时候,我们使用JS的getComputedStyle()是获取不到这个颜色值的。已知CSS如下:并且我们的链接表现为红色,此时我们运行下面的JavaScript代码:结果输出的是: “rgb(0, 0, 255)” ,也就是蓝色blue对应的RGB色值。1.行内样式,最直接最简单的一种,直接对HTML标签使用style=””。2.内嵌样式,就是将CSS代码写在之间,并且用进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。“CSS visited伪类选择器如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站,小编将为大家输出更多高质量的实用文章!

相关推荐: php gmp如何编译安装

这篇文章主要介绍了php gmp如何编译安装的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇php gmp如何编译安装文章都会有所收获,下面我们一起来看看吧。 php gmp编译安装的方法:1、通过“bzip2 -d gcc-4.1…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

Like (0)
Donate 微信扫一扫 微信扫一扫
Previous 03/07 18:35
Next 03/07 18:35

相关推荐