Зачем нам нужно "a: link"? Почему не просто "а"?

Кажется, что следующие варианты дают идентичные результаты:

/* 1 */
a, a:visited, a:active { color: black; }
a:hover { color: red; }

/* 2 */
a, a:link, a:visited, a:active { color: black; }
a:hover { color: red; }

/* 3 */
a:link, a:visited, a:active { color: black; }
a:hover { color: red; }

Большинство руководств в Интернете использует 2 или 3. Почему бы не пойти на самый простой вариант, который равен 1? Я не могу найти вескую причину когда-либо применять :link, если вам нужно только один стиль для обычных ссылок и один для зависания.

Лучше всего не использовать :link? Почему или почему нет?

Мне не важно, посещена ли ссылка или нет. Оба получат один и тот же стиль. Меня беспокоит только зависание или не зависание. Этот вопрос не о том, что делают варианты - все делает то же самое. Речь идет о лучшем варианте. Является ли один из вариантов неисправным? Какой из них лучше всего подходит?

Ответы

Ответ 1

Потому что не каждый a является ссылкой.

<a name="table_of_contents">Table of Contents</a>

не является ссылкой, это якорь, с которым можно связать с <a href="#table_of_contents">.

a будет соответствовать, a:link не будет.

Ответ 2

Используется для различения простых якорей и якорей с атрибутами href. См. демонстрацию jsfiddle здесь.

<style>
a { color: red; }
a:link { color: blue; }
</style>
<a name="anchor">No href</a><br />
<a href="http://stackoverflow.com/">With href</a>

EDIT: По этой причине важно охватить все случаи вашего CSS. Вариант 2 - единственный вариант, который полностью охватывает все случаи. Если у вас нет элементов привязки без атрибутов href, вы можете быть уверены в опции 1.

Ответ 3

a:link предназначен специально для ссылок, которые не были посещены. а применяется ко всем элементам <a>. Вы сказали

Мне не важно, посещена ли ссылка или нет

то вы можете избежать использования a:link... использование только a...a:hover...a:active удовлетворит ваши потребности

а также a:link не работает, если в вашем якоре нет href, но a будет делать

Ответ 4

Я полагаю, вы можете использовать

<a>

чтобы создать кнопку, чтобы можно было получить альтернативные результаты... Я всегда использую a:link

Ответ 5

Это зависит только от вашего намерения, поэтому для вашего примера я бы просто стилизовал все элементы привязки одного цвета и только изменил стиль, когда элемент завис.

a {color: #000;}
a:hover {color: #f00;}

В вашем случае вы меняете цвет ссылки только тогда, когда она зависает. Вам нужно добавить псевдо-элемент hover после базового правила, иначе он будет переопределен из-за каскадирования таблицы стилей.

Если бы вы использовали все элементы psuedo в этом случае, и вы хотели, чтобы единственным отличием было это зависание, это выглядело бы так:

a:link, a:visited, a:focus, a:active {color: #000;}
a:hover {color: #f00;}

Имена псевдокласса самоочевидны:

  • : link - любая нераскрытая ссылка
  • : visited - любая посещенная ссылка
  • : активен - когда ссылка активна, например. когда он щелкнул или активировал событие клавиатуры.
  • : focus - когда ссылка получает фокус, например. когда пользователь вставляет элементы в элементы и является выбранным элементом
  • : hover - когда он зависает или замалчивается над

Преимущество использования псевдокласса заключается в том, что он будет иметь более высокую специфичность, чем просто нацеливание на элемент привязки. Однако в вашем случае это может не понадобиться.