Yra daugybė būdų, kaip galite pasirinkti elementus CSS. Pagrindinis pasirinkimas yra žymos pavadinimas, pvz p ( ). Beveik viskas, kas yra konkretesnė nei žymos parinkiklis, naudoja atributus - classir IDabu pasirenka tuos atributus HTML elementuose. Bet classir IDyra ne tik atributus kūrėjai gali pasirinkti. Mes galime naudoti bet kurį elemento atributą kaip selektorių.
Atributų pasirinkimas turi specialią sintaksę. Štai pavyzdys:
a(href="https://css-tricks.com") ( color: #E18728; )Tai tikslios atitikties parinkiklis, kuris pasirinks tik nuorodas su tikslia hrefatributo reikšme „https://css-tricks.com“.
Septyni skirtingi tipai
Požymiai pagal numatytuosius nustatymus skiria didžiųjų ir mažųjų raidžių reikšmes (žr. Žemiau skiriamą didžiųjų ir mažųjų raidžių atitikimą) ir yra rašomi skliausteliuose ().
Yra septyni skirtingi atitikmenų tipai, kuriuos galite rasti naudodami atributų parinkiklį, ir kiekvieno sintaksė skiriasi. Kiekvienas iš sudėtingesnių atributų parinkėjų remiasi tikslios atitikties parinkiklio sintakse - jie visi prasideda atributo pavadinimu ir baigiasi lygybės ženklu, po kurio nurodoma atributo vertė (-ys), paprastai kabutėse. Tai, kas vyksta tarp atributo pavadinimo ir lygybės ženklo, yra tai, kas daro skirtumą tarp pasirinkėjų.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Vertėje yra: atributo reikšmėje yra terminas kaip vienintelė reikšmė, vertė vertybių sąraše arba kaip kitos vertės dalis. Norėdami naudoti šį selektorių, prieš lygybės ženklą pridėkite žvaigždutę (*). Pavyzdžiui, img(alt*="art")pasirinks vaizdus su alt tekstu „abstraktus menas“ ir „atletas, pradedantis naują sportą“, nes reikšmė „menas“ yra žodyje „startas“.
Vertė yra tarpų atskirtame sąraše: vertė yra arba vienintelė atributo reikšmė, arba yra visa vertė tarpais atskirtų verčių rinkinyje. Skirtingai nuo selektoriaus „sudėtyje“, šis selektorius neieškos vertės kaip žodžio fragmento. Norėdami naudoti šį selektorių, prieš lygybės ženklą pridėkite tildę (~). Pavyzdžiui, img(alt~="art")pasirinks vaizdus su alt tekstu „abstraktus menas“ ir „meno šou“, bet ne „atletas, pradedantis naują sportą“ (kurį pasirinktų parinktis „sudėtyje“).
Vertė prasideda: atributo vertė prasideda nuo pasirinkto termino. Norėdami naudoti šį selektorių, prieš lygybės ženklą pridėkite „caret“ (^). Nepamirškite, svarbu jautrumas didžiosiomis ir mažosiomis raidėmis. Pvz., Img (alt = ”art”) parinks paveikslėlius su alt tekstu “meno šou” ir “meninis raštas”, bet ne vaizdą su alt tekstu “Arthur Miller”, nes “Arthur” prasideda didžiąja raide .
Vertė pirmiausia yra brūkšneliais atskirtame sąraše: šis parinkiklis yra labai panašus į parinkiklį „prasideda nuo“. Čia parinkiklis sutampa su verte, kuri yra vienintelė arba yra pirmoji brūkšneliais atskirtame verčių sąraše. Norėdami naudoti šį selektorių, prieš lygybės ženklą pridėkite simbolį (|). Pavyzdžiui, li(data-years|="1900")pasirinks sąrašo elementus, kurių data-yearsvertė yra „1900–2000“, bet ne sąrašo elementus, kurių data-yearsvertė yra „1800–1900“.
Vertė baigiasi: atributo reikšmė baigiasi pasirinktu terminu. Norėdami naudoti šį selektorių, prieš lygybės ženklą pridėkite dolerio ženklą ($). Pavyzdžiui, a(href$="pdf")parenka visas nuorodas, kurios baigiasi .pdf.
Pastaba apie kabutes: tam tikromis aplinkybėmis galite apeiti vertes be kabučių, tačiau pasirinkimo be kabučių taisyklės yra nenuoseklios keliose naršyklėse. Citatos visada veikia, todėl, jei laikysitės jų naudojimo, galite būti tikri, kad jūsų parinkiklis veiks.
„CodePen“ žr. CSS-Tricks (@ css-tricks) rašiklio atributų parinkiklius.
Įdomus faktas: reikšmės traktuojamos kaip eilutės, todėl jums nereikia daryti jokio prašmatnaus simbolių pabėgimo, kad jie atitiktų, kaip tai darytumėte, jei klasės ar ID selektoriuje naudotumėte neįprastus simbolius.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Skirtingos didžiosios ir mažosios raidės
Didžiųjų ir mažųjų raidžių atributų parinkikliai yra CSS darbo grupės 4 lygio specifikatorių dalis. Kaip minėta pirmiau, atributo vertės eilutės pagal numatytuosius nustatymus skiriamos didžiosiomis ir mažosiomis raidėmis, tačiau jas galima pakeisti į mažąsias ir mažąsias raides, pridedant iprieš pat pabaigos skliaustą:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Skirtingos didžiosios ir mažosios raidės gali būti labai naudingos taikant atributus, kuriuose yra nenuspėjamas, žmogaus parašytas tekstas. Pvz., Tarkime, kad pokalbio programoje sukūrėte kalbos burbulą ir norėjote prie bet kokių pranešimų pridėti „mojuojančią ranką“ su tekstu „labas“. Tai galite padaryti naudodami tik CSS, naudodami didžiųjų ir mažųjų raidžių skirtuką, kad sugautumėte visus galimus variantus:
Peržiūrėkite „CSP-Tricks“ (@ css-tricks) „CSP-Tricks“ („@ css-tricks“) atributų atitikimą rašikliams.
Juos derinant
Galite derinti atributų parinkiklį su kitais selektoriais, pvz., Žyma, klase ar ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Arba net derinkite kelis atributų parinkiklius. Šis pavyzdys parenka vaizdus su alt tekstą, apimantį žodį "asmuo", kaip tik vertę ar reikšmę erdvėje atskirta sąrašą, ir į srcvertę, kurią įeina vertė "Lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )„CodePen“ žr. CSS-Tricks („CSS-Tricks“ (@ css-tricks) pasirinktus rašiklius, skirtus atributams ir tik atributams).
Atributų parinkėjai „JavaScript“ ir „jQuery“
Atributų parinkiklius galima naudoti „jQuery“, kaip ir bet kuriuos kitus CSS parinkiklius. „JavaScript“ galite naudoti atributų parinkiklius su document.querySelector()ir document.querySelectorAll().
„CodePen“ peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „JS“ ir „jQuery“ rašiklių atributų parinkiklius.
Susijęs
- klasė
- ID
Daugiau informacijos
- Lieknas atributų selektorius
- MDN atributų selektoriai
- Atributų parinkėjai W3C CSS specifikacijose
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Bet koks | Bet koks | Bet koks | Bet koks | 7+ | Bet koks | Bet koks |