Для чего нужен псевдокласс any-link?

Я не знаю, является ли это частью какого-либо стандарта, но по крайней мере два основных браузера реализовали его:

  • :-webkit-any-link в Chrome
  • :-moz-any-link в Firefox

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

11
css css-selectors pseudo-class

2 ответов

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

в целях :link и :visited, WHATWG как средство HTML-код и КОНСОРЦИУМА W3C В HTML5 оба определяют "гиперссылку" как любую из:

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

  • An <area> элемент, который имеет .

  • A <link> элемент, который имеет .

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

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

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

С :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 существуют, о которых я знаю. Я не уверен, а также, было ли это реализовано соответствующими поставщиками, а затем предложено для включения в селекторы 4, или это было предварительно указано до того, как поставщики начали его внедрять, но я не думаю, что это имеет значение.

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

19

на Mozilla CSS расширения документ :-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 элемент.

2