Каждый пример и таблица стилей, на которые я смотрел, используют a:visited
для стилей ссылок. Кроме того, a:visited
с более высокой специфичностью, не должен :visited
быть эквивалентным и более простым?
Почему бы и нет: посетили вместо: посетили ссылки?
Ответ 1
TL; DR: На момент написания статьи вы совершенно правы; нет разницы между a:visited
и :visited
. Однако использование a:visited
- лучшая практика для будущей проверки вашего кода.
TL; DR EDIT: с августа 2016 года рабочий проект CSS4 позволяет использовать другие теги :visited
. В настоящее время существует функциональное различие между a:visited
и :visited
! Осторожно.
Для языков веб-разработки сегодня, в частности, HTML5 и CSS3, вы правы: функционально нет разницы между a:visited
и :visited
. Теперь, пожалуйста, используйте это с осторожностью: веб-стандарты, элементы и протоколы пользовательского интерфейса постоянно развиваются, а это значит, что в будущем возможно появление нового тега, совместимого с :visited
.
Когда был введен в CSS, W3C CSS1 spec сказал:
В CSS1 якорные псевдоклассы не влияют на элементы, отличные от 'a'. Поэтому тип элемента можно исключить из селектора:
a:link { color: red }
==:link { color: red }
HOWEVER, в спецификация CSS2, поведение псевдокласса :visited
не ограничено к тегам a
:
Язык документа определяет, какие элементы являются источниками якоря гиперссылки. Например, в HTML4 псевдоклассы ссылок относятся к элементам
a
с атрибутом "href".
Это означает, что до языка документа и браузера определяется, какие элементы совместимы с :visited
. В то время как в текущем отраслевом стандарте указано, что для HTML, только a
элементы с атрибутом href
квалифицируются, это может измениться позже по строке.
EDIT, август 2016 г.. Похоже, рабочий проект CSS4 подтвердил мои подозрения; в новой спецификации :visited
может использоваться для других "ссылок", а именно: <area>
и <link>
. Спектр говорит:
Псевдокласс класса any-link представляет собой элемент, который выступает в качестве исходного якоря гиперссылки. Например, в [HTML5] любые элементы
<a>
,<area>
или<link>
с атрибутом href являются гиперссылками.
Итак, <a>
, <area>
и <link>
рассматриваются как гиперссылки, а спецификация говорит, что :visited
применяется ко всем гиперссылкам. Итак, с CSS4 вам будет лучше, включая a
в a:visited
.
Ответ 2
В соответствии с Селекторами уровня 4 :visited
применяется к любой гиперссылке, которая в HTML является элементами <a>
, <area>
и <link>
, когда они имеют a href
.
Быстрый тест для элемента link
показывает, что Firefox, по крайней мере, частично соблюдает это:
Попробуйте http://jsfiddle.net/rfdzpjLo/4/ в FF или см. ниже
link:before { content:attr(href); }
link { display:block; }
:visited { color: red; }
:link { color:green; }
<link href="http://stackoverflow.com/questions/27263128/why-not-visited-instead-of-avisited-for-links" />
<link href="example.net/lsjhuehbsi00ejjdus" />
Ответ 3
Да, но он не будет совместим с будущим, если будет введен новый тег, который может быть оформлен с помощью :visited
.
Ближайшее доказательство я могу найти:
http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
Язык документа определяет, какие элементы являются источниками якоря гиперссылки. Например, в HTML4 псевдоклассы ссылок применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS 2.1 имеют схожий эффект:
a:link { color: red }
:link { color: red }
Ответ 4
В теории это то же самое по причинам, о которых уже упоминалось. На бумаге a:visited
vs :visited
делает явным, что стиль применяется только к якорям и может потенциально быть более быстрым: подумайте об этом как обозревателе, которому необходимо перебирать все теги a
с одной стороны и проверять если применяется :visited
, vs делает то же самое для всех тегов в DOM.
Предположим, например, эта посещенная ссылка:
<a id="foo" class="bar" href="...">visited link</a>
Затем рассмотрим следующий CSS:
#foo {
color: red;
}
.bar {
color: green;
}
:visited {
color: purple
}
Раньше существовало время, когда ссылка была бы красной, зеленой или фиолетовой в зависимости от браузера. (Возможно, это все еще так, я не тестировал.) Потому что некоторые будут относиться к #foo
как к более важному, чем .bar
(это идентификатор против класса), и оба из них важнее, чем :visited
для аналогичных причины. Некоторые будут относиться к #foo
, .bar
и :visited
, как если бы они имели такое же значение, как и свойство самого тега. Некоторые из них могли бы относиться к #foo
и .bar
как к равным, но более важным, чем :visited
, потому что последний является простым псевдоклассом. И так далее.
Теперь рассмотрим этот CSS, который является тем материалом, который вы можете встретить сегодня в таблице стилей:
a.bar {
color: green;
}
:visited {
color: purple
}
Даже если предположить, что теги, идентификаторы, классы и псевдоклассы обрабатываются равными, у нас все еще есть потенциальная проблема, так как a.bar
также может считаться более конкретным, чем обычный :visited
некоторыми браузерами.
Ergo, вам нужно указать a:visited
в объявлении, чтобы обеспечить согласованность поведения во всех браузерах - и, скорее всего, есть еще несколько плохих яблок, которые заставят вас писать a:visited, a.bar:visited
просто чтобы быть уверенным.
Как только вы столкнетесь с проблемой несколько раз, сила привычки срабатывает, и вы всегда будете писать a:hover
или a:visited
.
Ответ 5
:visited
- это селектор псевдокласса, используемый только для элементов привязки ссылок, которые совпадают, когда этот атрибут href этой привязки был посещен в прошлом этим браузером. Он предназначен для полезной обратной связи для пользователя, поэтому они могут отличить ссылки, с которыми они были связаны, и ссылки, которых у них нет.
Синтаксис псевдокласса выглядит следующим образом
selector:pseudo-class {
property:value;
}
Таким образом, вы должны использовать селектор при использовании псевдо-класса и, поскольку он поддерживает только ссылки, в этом случае селектор будет a
.