:matchesPseudo klasė aprašyta kaip funkcinis pseudo-klasės oficialiai CSS selektoriai 4 lygis specifikacijos. Tai savaime neatlieka jokio tikslo, išskyrus kai kurių sudėtingų selektorių palengvinimą, leidžiant juos sugrupuoti. Tam tikra prasme galime galvoti kaip :matchesapie sintaksinį cukrų.
Iš esmės tai neleidžia kartoti sudėtinio parinkiklio, kai yra tik vienas elementas, kuris skiriasi. Manau, kad yra ne tik greitesnis rašymas, bet ir greitesnis analizavimas naršyklėms, tačiau neturiu jokios patikimos informacijos apie tai, kiek žinau, kad ši pseudo klasė nieko daugiau nei padeda rašyti selektoriams.
Sintaksė
:matches( selector(, selector)* ):matches()priima galiojančių selektorių sąrašą kaip argumentą. Kaip:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Tai labai palengvina kai kurių sudėtingų pasirinkėjų rašymą, pavyzdžiui:
: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; )Ir mažiau kartojasi:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Atminkite, kad :matches()negalima įdėti į lizdą ir jis neveikia :not(). Nei vienas iš šių selektorių neveiks:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alert
Specifikacijose teigiama, kad kombinatoriai (pvz. ~, >...) neleidžiami greitai perduodamame selektoriuje, tačiau jie bus sudėtingo profilio. Paprasčiau tariant, greitas profilis bus pirmasis (ir galimas paskutinis) specifikacijų įgyvendinimas, o sudėtingas profilis sieja hipotetinę tobulą ateitį, kai našumas neturi didelės reikšmės.
Atnaujinti 2015 m. Birželio mėn.: Nebežinote, ar tiksli aukščiau pateikta pastraipa. Specifikacija, su kuria susiejome, pasikeitė ir šios dalies nebeliko. Taigi pašalinome nuorodą.
Imituoja elgesį su Sassu
Galima imituoti panašų elgesį su „Sass“ (ar bet kokiu CSS išankstiniu procesoriumi):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Tai sukuria lygiavertį selektorių :matches()išnaudojant selektoriaus lizdą. Jūs netgi galite sukurti tam tikrą funkciją, kad tai automatizuotumėte aukštesniame lygyje, tačiau čia tai nepatenka į taikymo sritį.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 88 | 78 | Ne | 88 | 14 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 14,0–14,4 |
Pastaba: kadangi CSS atmeta visą selektorių, kai yra dalis, kurios ji nesupranta, turite juos atskirti, kad jis veiktų visur. Pavyzdžiui, jei jūs vis dar
/* 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; )