:matchesПсевдо-класс описываются как функциональный псевдо-класс официального CSS селекторы уровень 4 спецификации. Сам по себе это не служит никакой цели, кроме облегчения некоторых сложных селекторов, позволяя их группировать. В каком-то смысле мы можем мыслить :matchesкак синтаксический сахар.
В основном это удерживает вас от повторения составного селектора, когда есть только один элемент, который меняется. Я считаю, что это не только быстрее писать, но и быстрее анализировать браузеры, но у меня нет достоверной информации об этом, поэтому, насколько я знаю, этот псевдокласс не делает ничего, кроме помощи в написании селекторов.
Синтаксис
:matches( selector(, selector)* ):matches()принимает в качестве аргумента список допустимых селекторов. Нравиться:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Это значительно упрощает написание некоторых сложных селекторов, например:
:matches(section, article, aside, nav) :matches(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )И менее повторяющиеся:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Обратите внимание, что :matches()не может быть вложенным и не работает с :not(). Ни один из следующих селекторов не будет работать:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Предупреждение ботаников
В спецификациях указано, что комбинаторы (например ~, >…) не допускаются в переданном селекторе в быстром профиле, но будут в сложном профиле. Проще говоря, быстрый профиль будет первой (и, возможно, последней) реализацией спецификаций, в то время как сложный профиль относится к гипотетическому идеальному будущему, в котором производительность не имеет большого значения.
Обновление от июня 2015 г .: Не уверен, насколько точен приведенный выше абзац. Спецификация, с которой мы связались, изменилась, и эта часть исчезла. Поэтому мы удалили ссылку.
Подражание поведению с помощью Sass
Подобное поведение можно смоделировать с помощью Sass (или любого препроцессора CSS, если на то пошло):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Это создает эквивалентный селектор :matches(), используя вложение селекторов. Вы даже можете создать какую-то функцию для автоматизации этого на более высоком уровне, но это выходит за рамки здесь.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 88 | 78 | Нет | 88 | 14 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 14,0-14,4 |
Примечание: поскольку CSS отклоняет весь селектор, когда есть часть, которую он не понимает, вам нужно разделить их, чтобы он работал везде. Например, если вы все еще
/* This won't work in any browser because * Webkit browsers do not know `moz` and * Gecko browsers do not know `webkit` */ :-webkit-any(a, b) c, :-moz-any(a, b) c ( color: #BADA55; ) /* This however will work */ :-webkit-any(a, b) c ( color: #BADA55; ) :-moz-any(a, b) c ( color: #BADA55; )