Что такое псевдо-класс: any-link?

Ответ 1

:any-link - новый псевдокласс, предложенный в Селекторах уровня 4, который соответствует всем элементам, которые будут соответствовать :link, :visited, Из того, что я вижу, его основная цель - упростить селектор, который должен выбрать любые гиперссылки, поскольку именование :link вводит в заблуждение; это специально означает не связанные ссылки, а не все гиперссылки (что делает его по существу противоположным :visited).

Для целей :link и :visited, WHATWG HTML и W3C HTML5 определяют как "гиперссылку" как любую из следующих:

• Элемент <a>, который имеет атрибут href. Это исключает именованные якоря (т.е. Элементы <a> без атрибута href, но вместо этого с атрибутом name), которые традиционно используются для обозначения привязок на странице, теперь заменяемых использованием атрибута id на любой элемент. См. с именем anchors в HTML 4.

• Элемент <area>, который имеет атрибут href.

• A <link>, который имеет атрибут href.

Например, рассмотрим сценарий, в котором ссылки в заголовке страницы должны быть окрашены по-разному от всех других ссылок:

body > header > a:link, body > header > a:visited {
    color: white;
}

Обратите внимание, что часть body > header дублируется для обоих селекторов. Это кажется излишним, но в настоящее время необходимо, чтобы цветные ссылки в заголовке страницы отличались от остальных, но независимо от их состояния посещения. Это связано с тем, что body > header > a не является достаточно конкретным, что требует использования !important для переопределения в любом случае, а body > header > a:link может быть применимо только к нерассмотренным ссылкам.

С псевдо-классом :any-link вы можете просто сделать это:

body > header > a:any-link {
    color: white;
}

Специфичность точно такая же, как и для каждой отдельной половины, поэтому там не должно быть проблем.

Конечно, поскольку ни один браузер не реализует его еще без изменений, это не сработает. В качестве альтернативы, учитывая, что вы, скорее всего, работаете с HTML-документом, вы можете просто использовать a[href] вместо этого, который работает во всех браузерах, включая IE7 +, помимо того, что он одинаково специфичен:

body > header > a[href] {
    color: white;
}

Там более подробное объяснение относительно использования a по сравнению с a:link, a:visited по сравнению с a:any-link по сравнению с a[href] в другом другом.

Как и все, что имеет префикс в CSS, :-moz-any-link и :-webkit-any-link существуют только для экспериментальных целей, поэтому вы не должны использовать их с вашими сайтами. Кроме того, даже если вы будете использовать их прямо сейчас, вам придется дублировать сами правила (а не только селектора!), Поскольку браузеры должны отбрасывать целые правила на непризнанные селектора, делая их довольно бесполезными в реальном коде!

С начала 2013 года никаких других реализаций :any-link не существует, о которых я знаю. Я не уверен в том, что это было реализовано соответствующими поставщиками, а затем предлагается для включения в Selectors 4, или если это было предварительно указано до того, как производители начали его внедрять, но я не думаю, что это имеет значение.

Говоря об этом, обязательно не путайте псевдокласс класса :-moz-any-link/:-webkit-any-link с :-moz-any()/:-webkit-any(), последний из которых вместо :matches() (возможно, чтобы избежать путаницы имен?).

Ответ 2

В документе Mozilla CSS Extensions, :-moz-any-link упоминается с примечанием "(соответствует: link и: visited)". Ссылка на подробную информацию мертва, но очевидной причиной использования такого псевдокласса является нечетная конструкция CSS в отношении ссылок: :link соответствует только независящим ссылкам, тогда как :visited соответствует посещенным ссылкам. Использование одного селектора полезно в сложных случаях, когда вам в противном случае нужно было бы написать два сложных селектора, которые отличаются только одним псевдоклассом.

Они могут использовать a[href], за исключением того, что это привяжет селектор к определенному элементу (и атрибуту), используемому для создания ссылок (что является проблемой языка разметки).

Используя Firebug и проверив ссылку в нем, вы увидите следующие стили из таблицы стилей по умолчанию в браузере:

*|*:-moz-any-link:not(svg|a) {
    text-decoration: underline;
}
:-moz-any-link {
    cursor: pointer;
}

Последний устанавливает форму указателя мыши ( "курсор" ) для всех ссылок. Первая делает ссылки подчеркнутыми, за исключением внутри элемента svg.