超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法)。以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行。

2019/04/10 10:10
阅读数 59

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*css中超链接正常的设置顺序。*/

/*未被访问过的链接,文字显示为黑色。*/
/*当四个伪类选择器对同一超链接标签a起作用时,只有浏览器记录中没有访问过该超链接的记录,四个伪类都有用。否则,该Link选择器无用。被访问前色变为visited设置的颜色。如果一定要解决link选择器失效的问题。可将link选择器颜色与visited选择器颜色设置一样的。例如黑色。即无论时被访问前,还是被访问后,该文字都为黑色。*/
a:link{
font-size:30px;
font-weight:bold;
text-decoration:none;
color:black;
}

/*已被访问过的链接,文字显示为红色。*/
/*若是visited属性失效的话,有两种可能。①超链接a标签中未写入href="";②四个伪类选择器的书写顺序错误。link->visited->hover->active,可记忆为LVha,*/
a:visited{
font-size:30px;
font-weight:bold;
text-decoration:none;
color:red;
}

/*鼠标指针悬浮在链接上,文字显示为蓝色。*/
a:hover{
font-size:30px;
font-weight:bold;
text-decoration:none;
color:blue;
}

/*鼠标指针正在点击链接,文字显示为橙色。*/
a:active{
font-size:30px;
font-weight:bold;
text-decoration:none;
color:orange;
}
</style>
</head>
<body>
<!-- href="#",#是要跳转的网页地址。
title="#",#是鼠标悬浮在该文本信息上是,文本信息成功显示时,会出现的文本信息提示。
alt="#",#是文本信息未成功显示时,会出现的文本信息提示。
target="#",#="_blank"时,代表在新窗口中打开。 -->
<a href="#" title="百度访问链接" alt="百度访问链接" target="_blank">百度</a>

<!--

左侧为超链接未被访问时的样式。

<br />

左侧为超链接被访问后的样式。需要注意的是,只要该超链接未产生过浏览器访问记录时,link与visited是不排斥的。即各自的效果都能够显示出来。若是浏览器记录中有访问过该超链接的记录,即使刷新,超链接未被访问过的样式LInk也会被visited所设置的样式取代。

<br />

鼠标悬浮在超链接上时的样式。

<br />

左侧为鼠标正在点击超链接,未松开时的样式。-->

</body>
</html>

原文出处:https://www.cnblogs.com/kaotimo/p/12284519.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部