:matchesPseido-klase ir aprakstīts kā funkcionālu pseido-klases oficiālā CSS selektori Level 4 specifikācijas. Tas pats par sevi nekalpo nekādam mērķim, izņemot dažu sarežģītu selektoru padarīšanu vieglāku, ļaujot tos grupēt. Savā ziņā mēs varam domāt kā :matchespar sintaktisko cukuru.
Būtībā tas attur jūs no salikta selektora atkārtošanas, ja mainās tikai viens vienums. Es uzskatu, ka pārlūkprogrammām ir ne tikai ātrāk rakstīt, bet arī ātrāk parsēt, bet man nav pārliecinošas informācijas par to, ciktāl es zinu, ka šī pseidoklase nedara neko citu kā palīdzēt rakstīšanas atlasītājiem.
Sintakse
:matches( selector(, selector)* ):matches()kā argumentu pieņem derīgu atlasītāju sarakstu. Patīk:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Dažus sarežģītus atlasītājus tas ir daudz vieglāk rakstīt, piemēram:
: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; )Un mazāk atkārtojas:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Ņemiet vērā, ka :matches()to nevar ligzdot un tas nedarbojas :not(). Neviens no šiem atlasītājiem nedarbosies:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alert
Specifikācijās teikts, ka kombinatori (piemēram ~, >…) nav atļauti ātri atlasītajā atlasītājā, bet tie būs sarežģītā profilā. Vienkāršāk sakot, ātrs profils būs pirmā (un, iespējams, pēdējā) specifikāciju ieviešana, savukārt sarežģītais profils attiecas uz hipotētisku perfektu nākotni, kur sniegumam nav lielas nozīmes.
Atjaunināt 2015. gada jūniju: vairs nezināt, cik precīzs ir iepriekšējais punkts. Specifikācija, ar kuru saistījām, ir mainījusies, un šī daļa vairs nav. Tāpēc mēs noņēmām saiti.
Atdarinot uzvedību ar Sassu
Ir iespējams simulēt līdzīgu rīcību ar Sass (vai jebkuru citu CSS priekšapstrādātāju šajā jautājumā):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Tas rada līdzvērtīgu selektoru, :matches()izmantojot selektora ligzdošanu. Jūs pat varētu izveidot sava veida funkciju, lai to automatizētu augstākā līmenī, taču tas šeit neietilpst.
Pārlūkprogrammas atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 88 | 78 | Nē | 88 | 14 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 14.0-14.4 |
Piezīme. Tā kā CSS noraida visu atlasītāju, ja ir daļa, kuru tā nesaprot, jums tas ir jānošķir, lai tas darbotos visur. Piemēram, ja jūs joprojām esat
/* 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; )