谈谈静态伪类

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

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”伪类意味着“选择未被点击的连接”。ide

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

相关文章
相关标签/搜索