В :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(… ))Nerd Alert
Спецификациите посочват, че комбинаторите (напр ~. >...) не са разрешени в преминалия селектор в бърз профил, но ще бъдат в сложен профил. Казано по-просто, бързият профил ще бъде първото (и възможно последно) изпълнение на спецификациите, докато сложният профил свързва хипотетично перфектно бъдеще, където производителността няма голямо значение.
Актуализация от юни 2015 г .: Вече не съм сигурен колко точен е горният параграф. Спецификацията, към която се свързахме, се промени и тази част я няма. Затова премахнахме връзката.
Имитиращо поведение със Сас
Възможно е да се симулира подобно поведение със Sass (или който и да е CSS препроцесор в този смисъл):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Това създава еквивалентния селектор на :matches()чрез използване на влагане на селектор. Можете дори да създадете някаква функция, която да автоматизира това на по-високо ниво, но това е извън обхвата тук.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | 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; )