:matchesPseudo-class je opisan kot funkcionalna psevdorazredu uradni CSS Izbirniki ravni 4 specifikacije. Sama po sebi ne služi nobenemu namenu, razen da nekatere kompleksne izbirnike olajša, tako da jim omogoči združevanje. Na nek način lahko mislimo :matcheskot skladenjski sladkor.
V bistvu vas odvrača od ponavljanja izbirnika spojine, če obstaja samo en element, ki se razlikuje. Verjamem, da ni samo hitreje pisati, ampak tudi hitreje razčleniti brskalnike, vendar o tem nimam trdnih informacij, tako da, kolikor vem, ta psevdorazred ne pomaga zgolj kot pomoč pri pisanju izbirnikov.
Sintaksa
:matches( selector(, selector)* ):matches()kot argument sprejme seznam veljavnih izbirnikov. Všeč mi je:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Nekatere zapletene izbirnike je veliko lažje pisati, na primer:
: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; )In manj ponavljajoče se:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Upoštevajte, da :matches()ga ni mogoče ugnezditi in z njim ne deluje :not(). Noben od naslednjih izbirnikov ne bo deloval:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alert
Specifikacije navajajo, da kombinatorji (npr ~. >…) Niso dovoljeni v posredovanem izbirniku v hitrem profilu, ampak bodo v kompleksnem profilu. Preprosto povedano, hitri profil bo prva (in možna zadnja) izvedba specifikacij, medtem ko zapleten profil povezuje hipotetično popolno prihodnost, kjer zmogljivost ni pomembna.
Posodobitev junij 2015: Nisem več prepričan, kako natančen je zgornji odstavek. Specifikacija, na katero smo se povezali, se je spremenila in tega dela ni več. Zato smo povezavo odstranili.
Posnemanje vedenja s Sassom
Podobno vedenje je mogoče simulirati s Sassom (ali s katerim koli predprocesorjem CSS):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )To ustvari enakovreden izbirnik :matches()z izkoriščanjem gnezdenja izbirnika. Lahko bi celo ustvarili nekakšno funkcijo za avtomatizacijo tega na višji ravni, vendar to tu ne spada v obseg.
Podpora brskalnika
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 88 | 78 | Ne | 88 | 14. |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Opomba: ker CSS zavrne celoten izbirnik, ko je del, ki ga ne razume, jih morate ločiti, da bo deloval povsod. Na primer, če ste še vedno
/* 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; )