当前位置：探究常见伪类visited奇怪的事儿
2017/03/21 14:38 分类： 技术交流 浏览：270
今天源码时代web前端培训讲师主要跟大家讨论一下CSS里的vistied伪类:凡是学过CSS基础的应该知道这个伪类.
visited：设置a标签访问后的样式。
先看如下代码：
主要介绍visited这个伪类【主要讨论visited】:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
li a:link{
background-color: #c11136;
color: #FFFFFF;
}
li a:visited{
background-color: #C11136;
color: #555555;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="http://www.ctrips.com" target="_blank" >Ctrips</a></li>
<li><a href="http://www.baidus.com" target="_blank">baidus</a></li>
</ul>
</div>
</body>
</html>
运行如上代码效果如下：
点击后Ctrips链接已经被访问了，这时它就会自动使用在CSS里面定义的被访问后要用的样式
li a:visited{
background-color: #C11136;
color: #555555;
}
效果图如下，Ctrips字体颜色已经更新成黑色：
符合我们的对visited预期的认识。
那接下来我们要怎么恢复原状【链接】呢？
第一种方式：ctrl+F5强制刷新通过实践发现刷新无法恢复到未访问前的样式
第二种方式：关闭浏览器，页面重新启动，依然不能恢复到初始状态
通过前两种方式我们发现并不能恢复到原状，所以断定访问后这个状态信息应该保存在文件里面的，否则刷新或者关闭浏览器之后就可以恢复
第三种方式：清空浏览器缓存数据（只清理缓存的图片和文字），依然不能恢复到初始状态
第四种方式：清空浏览器浏览记录
第四种方式可以恢复原状，那我们可以断定 访问链接之后的信息是保存在“浏览记录里面的”我们知道浏览记录里面全是存的一些网站地址。
既然存的是网站地址可不可以反过来想两种情况：
1:大家知道a标签里面的href用来指定跳转地址，如果把a设置为空链接，那是不是visited这个伪类状态就永远无法使用在空链接上面，下面通过实例带来验证一下。
2：既然是通过浏览记录来判断是否访问过某个链接，那如果访问一个无效的链接【1:重定向的链接，2：无效的域名】能使用visited伪类属性吗？
空链接：
结果：并不是我们想的那样，而是空连接一样生效了，那这是为什么了？我们前面说过访问过得链接才会使用伪类上的属性，点击空连接之后会不会产生一个访问记录呢？这应该是我们关心的，如果有记录肯定在浏览器历史记录里面是能找到的，对不对？
红色圈的完整链接如下：
http://127.0.0.1:8020/day1_CSS3_Code/03%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8.html#
注意：url链接后面是不是有个#号，这个#号就是我们设置的（href=“#”），既然在浏览记录里面产生了一条记录，那也能说明为什么空链接也能使用visited伪类上的属性。
咱们现在开始验证第二个猜想如果点击一个无效url之后是否能使用visited上的属性
如下代码两个都是无效链接：
<ul>
<li><a href="http://www.ctrips.com" target="_blank" >Ctrips</a></li>
<li><a href="http://www.baidus.com" target="_blank">baidus</a></li></ul>
接着依次点击链接
http://www.ctrips.com 重定向了 660.dragonparking.com 并在历史记录里面产生了记录
http://www.baidus.com 这个域名直接找不到，在浏览记录里面
看访问后的效果：
总结：凡是有浏览记录的都会被使用上visited上的样式（包括重定向），无效域名的网站无法使用visited伪类。
咱们看如下代码：携程和百度这两个网站很有可能在你的浏览记录里面原本就有了，如果我们第一次运行如下代码，这时如果在你的浏览器中已经有这个两个记录，那么他们会自动使用visited伪类上的属性吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
li a:link{
background-color: #c11136;
color: #FFFFFF;
}
li a:visited{
background-color: #C11136;
color: #555555;
}
li a:hover{
background-color: #C11136;
color: #0099FF;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="http://www.ctrip.com" target="_blank" >携程</a></li>
<li><a href="http://www.baidu.com" target="_blank">百度</a></li>
</ul>
</div>
</body>
</html>
初次运行一下（浏览器浏览记录里面没有百度和携程的访问记录）：
浏览器记录没有任何东西，接下来我们手动在浏览器地址栏里面手动访问百度（http://www.baidu.com）和携程（http://www.ctrip.com）首页，目的是让浏览器收录到浏览记录里面。
然后回到127.0.0.1我们的测试页面：
果断发现已经自动使用上了伪类visited里面的样式。为什么我在其他窗口打开携程和百度的两个页面，我们的页面会自动加上相应伪类的样式呢？，这里发表个人看法，由于不了解谷歌到底是怎么做，仅代表个人看法，错误请勿喷。
猜想vistied原理？
第一次加载页面的时候，当浏览器在解析CSS样式的时候，当发现a标签使用了visited伪类时，取出a标签href属性值，然后和浏览记录里面的数据作比较，如果浏览记录里面有相等的记录，就用visited里面设置样式来渲染a标签，如果在浏览记录里面没有匹配到href属性里面值，那么建立一个监听，当监听到浏览记录表里面有任何更新的时候，会把href里面值和更新后的浏览记录表里的数据再做一次匹配，同样匹配成功后把vistited样式重新渲染a标签，反之继续监听。记住有可能全是错误的！
以下是百度首页的使用vistied的例子：
#u1 a.mnav, #u1 a.mnav:visited {
float: left;
color: #333;
font-weight: 700;
line-height: 24px;
margin-left: 20px;
font-size: 13px;
text-decoration: underline;
}
一般情况下vistied状态下和普通链接点击的未点击状态保持一致，防止带来意外的样式问题。
赞 0
