为什么不:访问而不是:访问链接?
我看过的每个示例和样式表都使用a:visited
来设置样式链接。 另外a:visited
具有较高的特异性,不应该:visited
相当简单?
TL; DR:在撰写本文时,你是完全正确的; a:visited
和:visited
之间没有区别。 但是,使用a:visited
是validation代码的最佳实践。
TL; DR编辑:截至2016年8月,CSS4工作草案允许其他标签使用:visited
。 现在有a:visited
和:visited
的function区别! 谨防。
对于今天的Web开发语言,特别是HTML5和CSS3,你是对的: a:visited
和:visited
在function上没有区别。 现在,请谨慎对待:Web标准,元素和用户界面协议不断发展,这意味着将来可能会引入兼容:visited
的新标签。
什么时候:visited
是在CSS中引入的, W3C的CSS1规范说:
在CSS1中,锚伪类对“a”以外的元素没有影响。 因此,元素types可以从select器中省略:
a:link { color: red }
==:link { color: red }
然而 ,在CSS2规范中 , :visited
伪类的行为不仅限于a
标签:
文档语言确定哪些元素是超链接源锚。 例如,在HTML4中,链接伪类适用于具有“href”属性
a
元素。
这意味着由文档语言和浏览器决定哪些元素与:visited
相兼容。 虽然目前的行业标准规定,对于HTML,只有具有href
属性a
元素才有资格,这可能稍后会改变。
编辑,2016年8月 :看起来像CSS4工作草案已经证实了我的怀疑; 在新规范中:visited
可以用于其他“类链接”元素,即<area>
和<link>
。 规范说:
:any-link伪类表示一个充当超链接源锚点的元素。 例如,在[HTML5]中,任何具有href属性的
<a>
,<area>
或<link>
元素都是超链接。
因此, <a>
, <area>
和<link>
都被视为超链接,规范说明:visited
适用于所有超链接。 所以从CSS4开始,你最好将a
包含在a:visited
。
根据select器级别4 :visited
适用于任何超链接,在HTML中是具有href
属性的<a>
, <area>
和<link>
元素。
link
元素的快速testing表明,Firefox至less部分地尊重这一点:
尝试http://jsfiddle.net/rfdzpjLo/4/在FF或见下文;
link:before { content:attr(href); } link { display:block; } :visited { color: red; } :link { color:green; }
<link href="http://stackoverflow.com/questions/27263128/why-not-visited-instead-of-avisited-for-links" /> <link href="example.net/lsjhuehbsi00ejjdus" />
是的,但是如果引入了一个新的标签,那么它将不会被兼容。
最近的certificate我可以find:
http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
文档语言确定哪些元素是超链接源锚。 例如,在HTML4中,链接伪类适用于具有“href”属性的A元素。 因此,以下两个CSS 2.1声明有类似的效果:
a:link { color: red } :link { color: red }
从理论上讲,前面提到的原因是一样的。 在论文中, a:visited
vs :visited
使得它明确的表示风格只适用于锚点,并且可能会更快一些:将其视为浏览器需要遍历所有标签,并检查是否:visited
适用于所有的DOM标签。
但是,Imho更重要的原因是与标签,伪select器,类和标识符相关的样式不一定以一致且可预测的顺序从浏览器应用到下一个。
假设,例如,这个访问过的链接:
<a id="foo" class="bar" href="...">visited link</a>
然后考虑下面的CSS:
#foo { color: red; } .bar { color: green; } :visited { color: purple }
过去有一段时间,链接将显示红色,绿色或紫色取决于浏览器。 (也许情况还是这样;我还没有testing过)。因为有些人会把#foo
当作比.bar
更重要的东西(这是一个ID和一个类),而这两者都比以前更重要。 有些人将#foo
, .bar
和:visited
视为具有相同的重要性,作为标签本身的属性。 有些人可能#foo
和.bar
当作平等对待,但是比以前更重要。因为后者只是一个伪类。 等等。
现在,考虑一下这个CSS,你可能会在今天的样式表中遇到这种情况:
a.bar { color: green; } :visited { color: purple }
即使假设标签,ID,类和伪类都是平等的,我们仍然有一个潜在的问题,因为a.bar
也可以被认为比plain更具体:visited
被某些浏览器:visited
。
最后,你最终需要在声明中指定a:visited
,以确保所有浏览器中的行为都是一致的 – 而且可能还有一些坏苹果会让你想写a:visited, a.bar:visited
只是为了确保。
一旦碰到这个问题几次,习惯的力量就会踢进去,最后总会写a:hover
或者a:visited
。
:visited
是一个伪类select器, 仅用于与该锚点链接的href属性过去由该浏览器访问时匹配的锚点链接元素相匹配。 这意味着对用户来说是有用的反馈,所以他们可以告诉他们之间的联系和他们没有联系的区别。
参考
伪类的语法如下
selector:pseudo-class { property:value; }
所以你必须在使用伪类时使用select器,因为它仅支持链接,在这种情况下,select器将是a
。