:matchesPseudo-klasa jest opisana jako funkcjonalny pseudo-klasy przez urzędowego Selektory CSS poziom 4 specyfikacji. Samo w sobie nie służy to żadnemu celowi, z wyjątkiem rozjaśniania niektórych złożonych selektorów, umożliwiając ich grupowanie. W pewnym sensie możemy myśleć jako :matchescukier syntaktyczny.
Zasadniczo powstrzymuje Cię to od powtarzania selektora złożonego, gdy istnieje tylko jeden element, który się zmienia. Uważam, że pisanie jest nie tylko szybsze, ale także szybsze jest analizowanie dla przeglądarek, ale nie mam solidnych informacji na ten temat, o ile wiem, ta pseudoklasa nie robi nic poza pomaganiem w pisaniu selektorów.
Składnia
:matches( selector(, selector)* ):matches()akceptuje listę prawidłowych selektorów jako argument. Lubić:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Ułatwia to pisanie niektórych złożonych selektorów, na przykład:
: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; )I mniej powtarzalne:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Pamiętaj, że :matches()nie można go zagnieżdżać i nie działa z :not(). Żaden z tych selektorów nie będzie działać:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Ostrzeżenie przed kujonem
Specyfikacje stwierdzić, że kombinatorów (np ~, >...) nie są dozwolone w szybkim przeszedł selektora w profilu, ale będzie w złożonym profilu. Mówiąc prosto, szybki profil będzie pierwszą (i możliwą ostatnią) implementacją specyfikacji, podczas gdy złożony profil wiąże się z hipotetyczną idealną przyszłością, w której wydajność nie ma większego znaczenia.
Aktualizacja z czerwca 2015 r .: Nie wiem, jak dokładny jest powyższy akapit. Specyfikacja, z którą się łączyliśmy, uległa zmianie i ta część zniknęła. Więc usunęliśmy link.
Naśladowanie zachowania z Sassem
Możliwe jest zasymulowanie podobnego zachowania za pomocą Sass (lub dowolnego preprocesora CSS):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Tworzy to równoważny selektor :matches(), wykorzystując zagnieżdżanie selektorów. Mógłbyś nawet stworzyć jakąś funkcję, aby zautomatyzować to na wyższym poziomie, ale to jest poza zakresem tutaj.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 88 | 78 | Nie | 88 | 14 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Uwaga: ponieważ CSS odrzuca cały selektor, gdy istnieje część, której nie rozumie, musisz je oddzielić, aby działał wszędzie. Na przykład, jeśli nadal
/* 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; )