:matchesPseudo-klassi on kirjeldatud kui funktsionaalne pseudo-klassi ametlik CSS lülitid Level 4 kirjeldused. Sellel pole iseenesest mingit eesmärki, välja arvatud see, et muudetakse mõned keerulised selektorid kergemaks, lubades neil rühmitada. Mõnes mõttes võime mõelda :matchessüntaktilise suhkruna.
Põhimõtteliselt hoiab see teid ühendvalija kordamisest eemal, kui on ainult üks varieeruv üksus. Usun, et brauserite jaoks pole mitte ainult kiirem kirjutada, vaid ka parsida, kuid mul pole selle kohta kindlat teavet, nii palju kui ma tean, et see pseudoklass teeb muud kui aitab kirjutajavalijaid.
Süntaks
:matches( selector(, selector)* ):matches()aktsepteerib argumendina kehtivate valijate loendit. Nagu:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )See muudab mõne keeruka valija kirjutamise palju lihtsamaks, näiteks:
: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ähem korduvad:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Pange tähele, et :matches()seda ei saa pesastada ja see ei tööta :not(). Ükski järgmistest valijatest ei tööta:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alert
Kirjeldused märkida, et combinators (nt ~, >...) ei ole lubatud edasi valijat kiiresti profiili, kuid saab olema keeruline profiili. Lihtsamalt öeldes on kiire profiil spetsifikatsioonide esimene (ja võimalik viimane) rakendamine, samas kui keeruline profiil seostab hüpoteetilist täiuslikku tulevikku, kus jõudlusel pole suurt tähtsust.
Värskendage juunit 2015: pole enam kindel, kui ülaltoodud lõik täpsem on. Spetsifikatsioon, millega me linkisime, on muutunud ja see osa on kadunud. Niisiis eemaldasime lingi.
Sassiga käitumise jäljendamine
Sarnast käitumist on võimalik simuleerida ka Sassi (või mõne muu CSS-i eeltöötlejaga):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Sellega luuakse samaväärne selektor, :matches()kasutades selektorite pesitsemist. Selle automatiseerimiseks kõrgemal tasemel võiksite isegi luua mingisuguse funktsiooni, kuid see ei kuulu siinkohal.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 88 | 78 | Ei | 88 | 14 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0–14,4 |
Märkus: kuna CSS lükkab kogu valija tagasi, kui on osa, millest see aru ei saa, peate need kõikjal toimima panemiseks eraldama. Näiteks kui olete ikka veel
/* 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; )