Подтвердить что ты не робот

Почему бы и нет: посетили вместо: посетили ссылки?

Каждый пример и таблица стилей, на которые я смотрел, используют a:visited для стилей ссылок. Кроме того, a:visited с более высокой специфичностью, не должен :visited быть эквивалентным и более простым?

4b9b3361

Ответ 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.