Den :matchespseudo-klassen er beskrevet som en funktionel pseudo-klasse af den officielle CSS selektorer Level 4 specifikationer. Det tjener ikke noget formål i sig selv undtagen at gøre nogle komplekse vælgere lettere ved at lade dem grupperes. På en måde kan vi tænke :matchessom syntaktisk sukker.
Dybest set holder det dig væk fra at gentage en sammensat vælger, når der kun er en vare, der varierer. Jeg tror, det er ikke kun hurtigere at skrive, men også hurtigere at parse for browsere, men jeg har ingen solide oplysninger om dette, så vidt jeg ved, gør denne pseudoklasse intet mere end at hjælpe med at skrive vælgere.
Syntaks
:matches( selector(, selector)* ):matches()accepterer en liste over gyldige vælgere som argument. Synes godt om:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Det gør nogle komplekse vælgere meget lettere at skrive, for eksempel:
: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; )Og mindre gentagne:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Bemærk, at det :matches()ikke kan være indlejret og ikke fungerer med :not(). Ingen af følgende vælgere fungerer:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nørd Alert
Specifikationerne angiver, at kombinatorer (f.eks ~. >…) Ikke er tilladt i den beståede vælger i hurtig profil, men vil være i en kompleks profil. For at sige det enkelt vil hurtig profil være den første (og mulige sidste) implementering af specifikationerne, mens kompleks profil vedrører en hypotetisk perfekt fremtid, hvor ydeevne ikke betyder noget.
Opdatering juni 2015: Ikke sikker på, hvor præcist ovenstående afsnit er længere. Specifikationen, vi linkede til, er ændret, og den del er væk. Så vi fjernede linket.
Efterligner adfærd med Sass
Det er muligt at simulere en lignende adfærd med Sass (eller en hvilken som helst CSS-forprocessor for den sags skyld):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Dette skaber den ækvivalente vælger af :matches()ved at udnytte selektorens indlejring. Du kan endda oprette en slags funktion for at automatisere dette på et højere niveau, men det er uden for omfanget her.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 88 | 78 | Ingen | 88 | 14 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Bemærk: Da CSS afviser hele vælgeren, når der er en del, den ikke forstår, skal du adskille dem for at få det til at fungere overalt. For eksempel, hvis du stadig er
/* 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; )