奇怪的结果与一个空的href和：链接伪类 [英] Strange results with an empty href and the :link pseudo class

问题描述

以下是一些真正简单的标记和CSS：

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

 < a href =＃> one& a>< a href =>两个< / a>< a href>三< / a>< a>四< / a>   

FIDDLE

现在，从规范：

，链接伪类适用于具有href
属性的A元素。

所以我希望前3个链接是绿色的。

，结果实际上只有具有非空 href 的第一个链接是绿色的。

使用inspect元素，我看到 a：link 选择器实际上覆盖了所有前3种情况下的 a ，但由于某种原因只适用于第一种情况下的风格。

这是怎么回事？

还有一件事，当我测试各种浏览器时，我注意到Chrome，Firefox和IE11都产生了相同的结果，除了在Firefox中，当我重新加载（相同）代码（在小提琴只需点击运行） - 所有

解决方案

任何想法？

这似乎是由于各个浏览器选择处理未访问的链接的方式。 W3规范（ http://www.w3.org/ TR / CSS2 / selector.html＃link-pseudo-classes ）说明：

链接伪类适用于

Chrome（和Opera）请参阅 href =和 href 作为当前URL，因此将它们视为已访问。 Firefox和IE会将 href =和 href 视为未访问，直到您实际点击它们为止。

IE（未命中）：

Chrome（未点击）：
$ b

>

要支持此逻辑，请添加第五个链接 href =http://stackoverflow.com/questions/30371788/strange-results-with-an-empty-href-and-the -link-pseudo-class（此网页）会在Chrome中产生红色链接（类似于 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>五< / a>< a href =unvisited>六< / a>  
 div> 

Here is some really simple markup and CSS:

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

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

FIDDLE

Now from the spec:

in HTML4, the link pseudo-classes apply to A elements with an "href" attribute.

So i'd expect the first 3 links to be green.

But no, the result is actually that only the first link that has a non-empty href is green.

So I used inspect element and I saw that the a:link selector actually overides the a selector in all of the first 3 cases, but for some reason only applies the style on the first case.

What is going on here?

One more thing, when I tested the various browsers I noticed that Chrome,Firefox and IE11 all produced the same results, except that in Firefox, when I reload the (same) code (in the fiddle just click 'Run') - all the first 3 elements suddenly turn green.

Any ideas?

解决方案

This would appear to be due to the way individual browsers chose to handle unvisited links. The W3 spec (http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes) states:

The :link pseudo-class applies for links that have not yet been visited.

Chrome (and Opera) see href="" and href as being the current url and thus deem them as visited. Firefox and IE treat href="" and href as unvisited until you actually click on them.

IE (unclicked):

Chrome (unclicked):

To support this logic, adding a fifth link with href="http://stackoverflow.com/questions/30371788/strange-results-with-an-empty-href-and-the-link-pseudo-class" (this page) will result in a red link in Chrome (similar to the href="" and href links) because it sees the page as visited.

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>

这篇关于奇怪的结果与一个空的href和：链接伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！