使用空href和:link伪类的奇怪结果

Question

这是一些非常简单的标记和CSS:

a {
  color: red;
}
a:link {
  color: green;
}

<a href="#">one</a>
<a href="">two</a>
<a href>three</a>
<a>four</a>

小提琴

现在来自规范:

在HTML4中,链接伪类适用于具有"href"属性的A元素.

所以我希望前三个链接是绿色的.

但不,结果实际上只有非空的第一个链接href是绿色.

所以我使用了inspect元素,我看到a:link选择器实际上覆盖了a所有前三种情况中的选择器,但由于某种原因只在第一种情况下应用了样式.

这里发生了什么？

还有一件事,当我测试各种浏览器时,我注意到Chrome,Firefox和IE11都产生了相同的结果,除了在Firefox中,当我重新加载(相同)代码时(在小提琴中只需单击"运行") - 所有前3个元素突然变绿.

有任何想法吗？

Answer 1

这似乎是由于各个浏览器选择处理未访问链接的方式所致。W3 规范 ( http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes ) 指出：

:link 伪类适用于尚未访问过的链接。

Chrome（和 Opera）将href=""和href视为当前 url，因此认为它们已被访问。Firefox 和 IE 将href=""和视为href未访问，直到您实际单击它们。

IE（未点击）：

Chrome（未单击）：

为了支持此逻辑，添加第五个链接href="http://stackoverflow.com/questions/30371788/strange-results-with-an-empty-href-and-the-link-pseudo-class"（此页面）将在 Chrome 中生成一个red链接（类似于 和href=""链接href），因为它会看到该页面已被访问。

a {
  color: red;
}
a:link {
  color: green;
}

<a href="#">one</a>
<a href="">two</a>
<a href>three</a>
<a>four</a>
<a href="http://stackoverflow.com/questions/30371788/strange-results-with-an-empty-href-and-the-link-pseudo-class">five</a>
<a href="unvisited">six</a>