Странные результаты с пустым файлом href и: link pseudo class

Вот некоторые действительно простые разметки и CSS:

a {
  color: red;
}
a:link {
  color: green;
}
<a href="#">one</a>
<a href="">two</a>
<a href>three</a>
<a>four</a>

Ответы

Ответ 1

Это, по-видимому, связано с тем, как отдельные браузеры решили обрабатывать невидимые ссылки. Спецификация W3 (http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes) гласит:

Псевдокласс link: применяется для ссылок, которые еще не были посещены.

Chrome (и Opera) см. href="" и href как текущий URL-адрес и, следовательно, считают их посетителями. Firefox и IE рассматривают href="" и href как невидимые, пока вы на самом деле не нажмете на них.

IE (unclicked):

enter image description here

Chrome (unclicked):

enter image description here

Чтобы поддержать эту логику, добавление пятой ссылки с href="#" onclick="location.href='http://stackoverflow.com/info/30371788/strange-results-with-an-empty-href-and-the-link-pseudo-class'; return false;" (эта страница) приведет к ссылке red в 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="#" onclick="location.href='http://stackoverflow.com/info/30371788/strange-results-with-an-empty-href-and-the-link-pseudo-class'; return false;">five</a>
<a href="unvisited">six</a>