为什么不:访问而不是:访问链接?

时间:2014-12-03 03:28:07

标签: css css3 pseudo-element

我看过的每个示例和样式表都使用a:visited来设置链接样式。除a:visited具有更高的特异性外,:visited不应该等同且更简单吗?

5 个答案:

答案 0 :(得分:48)

TL; DR:在撰写本文时,您完全正确; a:visited:visited之间没有区别。但是,使用a:visited是未来验证代码的最佳做法。

TL; DR EDIT:截至2016年8月,CSS4工作草案允许其他代码使用:visited。现在a:visited:visited之间存在功能差异!当心。

对于今天的网络开发语言,特别是HTML5和CSS3,你说得对:{strong>功能a:visited:visited之间没有区别。现在,请谨慎对待:Web标准,元素和用户界面协议不断发展,这意味着将来可能会引入与:visited兼容的新标签。

在CSS中引入:visited时,W3C CSS1 spec说:

  

在CSS1中,锚点伪类对' a'以外的元素没有影响。因此,可以从选择器中省略元素类型:   a:link { color: red } == :link { color: red }

HOWEVER ,在CSS2 spec中,:visited伪类的行为并不仅限于a个标记:

  

文档语言确定哪些元素是超链接源锚点。例如,在HTML4中,链接伪类适用于带有" href"的a元素。属性。

这意味着由文档语言和浏览器决定哪些元素与:visited兼容。虽然目前的行业标准规定,对于HTML,只有a属性的href元素符合条件,但这可能会在以后的行中发生变化。

编辑,2016年8月:看起来CSS4 Working Draft证实了我的怀疑;在新规范中,:visited可用于其他类似链接的&#34;元素,即<area><link>。规范说:

  

:any-link伪类表示充当超链接的源锚点的元素。例如,在[HTML5]中,具有href属性的任何<a><area><link>元素都是超链接。

因此<a><area><link>都被视为超链接,规范称:visited适用于所有超链接。因此,从CSS4开始,您最好在a中加入a:visited

答案 1 :(得分:14)

根据Selectors Level 4 :visited适用于任何超链接,当HTML为<a><area><link>元素时,这些超链接具有{{1}属性。

href元素的快速测试表明,Firefox至少部分尊重这一点:

在FF中尝试http://jsfiddle.net/rfdzpjLo/4/或参见下面的

&#13;
&#13;
link
&#13;
link:before { content:attr(href); }
link { display:block; }
:visited { color: red; }
:link { color:green; }
&#13;
&#13;
&#13;

答案 2 :(得分:5)

是的,但是如果引入了可能使用:visited设置样式的新标记,则它将来不会兼容。

我能找到最贴近的证据:

http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

  

文档语言确定哪些元素是超链接源锚点。例如,在HTML4中,链接伪类适用于具有“href”属性的A元素。因此,以下两个CSS 2.1声明具有类似的效果:

a:link { color: red }
:link  { color: red }

答案 3 :(得分:4)

理论上,由于已经提到的原因,情况也是如此。在纸面上,a:visited vs :visited明确表示该样式仅适用于锚点,并且可能更快:将其视为需要遍历所有a标记的浏览器一方面,检查:visited是否适用,与DOM中的所有标签相同。

但是,Imho,更重要的原因是与标签,伪选择器,类和标识符相关的样式不一定以从浏览器到下一个浏览器的一致且可预测的顺序应用。

例如,假设这个访问过的链接:

<a id="foo" class="bar" href="...">visited link</a>

然后考虑以下CSS:

#foo {
  color: red;
}

.bar {
  color: green;
}

:visited {
  color: purple
}

曾经有一段时间,根据浏览器的不同,链接会显示为红色,绿色或紫色。 (也许情况仍然如此;我还没有经过测试。)因为,有些人认为#foo.bar更重要(它是一个ID与一个类)出于类似的原因,这两者比:visited更重要。有些会将#foo.bar:visited视为标记本身的属性,就好像它们具有相同的重要性一样。有些人可能会将#foo.bar视为平等,但比:visited更重要,理由是后者仅仅是伪类。等等。

现在,考虑一下这个CSS,这是你今天在样式表中可能遇到的那种东西:

a.bar {
  color: green;
}

:visited {
  color: purple
}

即使假设标签,ID,类和伪类都被视为相同,我们仍然存在潜在问题,因为某些浏览器也可以认为a.bar比普通:visited更具体。

因此,您最终需要在声明中指定a:visited以确保所有浏览器中的行为都是一致的 - 并且可能仍然存在一些不好的苹果,并且会让您想要写a:visited, a.bar:visited只是为了确定。

一旦你遇到问题几次,习惯就会开始,你最终会写a:hovera:visited

答案 4 :(得分:1)

:visited是一个伪类选择器,仅对 用于锚链接元素,当此浏览器过去访问过该锚链接的href属性时,该链接元素匹配。它对用户来说意味着有用的反馈,因此他们可以区分他们所处的链接和他们没有的链接。

<强> REFERENCE

伪类的语法如下

selector:pseudo-class {
    property:value;
}

因此,在使用伪类时必须使用选择器,因为它只支持链接,在这种情况下,选择器将是a