谈谈静态伪类

温故而知新可以为师矣。今天回看《CSS权威指南》发现了一个有趣的问题“静态伪类”。
在说静态伪类之前,想先问问各位,如果让一个链接点击前为蓝色,点击后变为红色,应该怎么做?
是这样吗?

a {color: blue};
a:visited {color:red};

应该没错,不是吗?老实说我以前也这么做。但是如果html结构变成下面这样,事情就有点复杂了:

<a name='anchor'>come here!</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis             nostrud exercitation         ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>``
<a href='#anchor'>go</a>
<a href='google.com'>google it</a>

注意到了吗,这段html结构中有一个“锚”标签,它没有href特性,而有name特性。但点击下方的go时,页面会被定为至'come here'区域。总之,那并不是一个严格意义上的链接,但是我们的链接样式却影响到它,这可能不是我们所希望的。
因此,在这种情况下,我们应该将样式表写成这样:

a:link{color:blue};
a:visited{color:red};

这样,就可以避免锚标签的样式被意外的“污染”了。因为“:link”伪类意味着“选择未被点击的链接”。

结束了?并没有。在实践过程中我发现一个很有趣的现象,当我在浏览器中点击一个链接后,无论我清空缓存,关闭页面并重新打开,浏览器都会识别出已点击的链接。这是怎么回事呢?我猜想是浏览器自己悄悄的维护着一个“链接清单”,会一直追踪被点击后的链接并标记,而这个清单对于开发者而言也是不可访问的。你也许会问“那我是不是可以根据网页链接点击后的颜色来判断用户访问过的网页链接呢?”真是个聪明的想法,可惜的是这方法在不久之前还有用,但是目前这条路已经被浏览器封住了,开发人员用脚本访问链接颜色时,将会始终获得链接的:link下颜色值,真令人遗憾,是不是?

原文地址:https://www.cnblogs.com/libinfs/p/6186017.html