:matchesNäennäisluokka kuvataan toiminnallinen näennäisluokka virallisen CSS valitsimet Taso 4 vaatimukset. Se ei palvele mitään tarkoitusta sinänsä, paitsi että jotkut monimutkaiset valitsimet ovat kevyempiä antamalla niiden ryhmitellä. Tavallaan voimme ajatella :matchessyntaktisena sokerina.
Pohjimmiltaan se pitää sinut poissa yhdistelmävalitsimen toistamisesta, kun vain yksi kohde vaihtelee. Uskon, että ei ole vain nopeampi kirjoittaa, vaan myös nopeammin jäsentää selaimille, mutta minulla ei ole vakaata tietoa tästä, sikäli kuin tiedän, että tämä pseudoluokka ei tee muuta kuin auttaa kirjoittamaan valitsimia.
Syntaksi
:matches( selector(, selector)* ):matches()hyväksyy luettelon kelvollisista valitsimista argumenttina. Kuten:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Se tekee joistakin monimutkaisista valitsimista paljon helpompia kirjoittaa, esimerkiksi:
: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; )Ja vähemmän toistuvia:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Huomaa, että :matches()sitä ei voida sisäkkäin eikä se toimi :not(). Mikään seuraavista valitsimista ei toimi:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nörttihälytys
Spesifikaatioiden mukaan yhdistimiä (esim ~. >…) Ei sallita ohitetussa valitsimessa nopeasti, mutta ne ovat monimutkaisia. Yksinkertaisesti sanottuna nopea profiili on eritelmien ensimmäinen (ja mahdollinen viimeinen) toteutus, kun taas monimutkainen profiili liittyy hypoteettiseen täydelliseen tulevaisuuteen, jossa suorituskyvyllä ei ole väliä paljoa.
Päivitys kesäkuussa 2015: Et ole enää varma, kuinka yllä oleva kappale on enää tarkka. Tekniset tiedot, joihin linkitimme, ovat muuttuneet ja osa on kadonnut. Joten poistimme linkin.
Käyttäytymisen jäljitteleminen Sassin kanssa
Samanlainen käyttäytyminen on mahdollista simuloida Sassin (tai minkä tahansa CSS-esiprosessorin kanssa):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Tämä luo vastaavan valitsimen :matches()hyödyntämällä valitsimen pesimistä. Voit jopa luoda jonkinlaisen toiminnon tämän automatisoimiseksi korkeammalla tasolla, mutta se ei kuulu tässä.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 88 | 78 | Ei | 88 | 14 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0 - 14,4 |
Huomaa: Koska CSS hylkää koko valitsimen, kun on osa, jota se ei ymmärrä, sinun on erotettava ne, jotta se toimii kaikkialla. Esimerkiksi, jos olet vielä
/* 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; )