CSS elementus var atlasīt daudzos veidos. Pamata izvēle ir pēc taga nosaukuma, piemēram p ( ),. Gandrīz jebkas konkrētāks par tagu atlasītāju izmanto atribūtus - classun IDabi atlasa šos atribūtus HTML elementos. Bet class, un IDir ne tikai atribūti izstrādātāji var izvēlēties. Kā atlasītājus mēs varam izmantot jebkuru no elementa atribūtiem.
Atribūtu atlasei ir īpaša sintakse. Lūk, piemērs:
a(href="https://css-tricks.com") ( color: #E18728; )Tas ir precīzās atbilstības atlasītājs, kas atlasīs tikai saites ar precīzu hrefatribūta vērtību vietnē “https://css-tricks.com”.
Septiņi dažādi veidi
Atribūtu atlasītāji pēc noklusējuma ir reģistrjutīgi (sk. Zemāk reģistrēto reģistrjutīgo un mazo burtu atšķirību), un tie tiek ierakstīti iekavās ().
Atribūtu atlasītājā var atrast septiņus dažāda veida atbilstības veidus, un sintakse katram ir atšķirīga. Katrs no sarežģītākajiem atribūtu atlasītājiem balstās uz precīzās atbilstības atlasītāja sintaksi - tie visi sākas ar atribūta nosaukumu un beidzas ar vienādības zīmi, kam seko atribūta vērtība (-as), parasti pēdiņās. Starp atribūta nosaukumu un vienādības zīmi notiek atšķirība starp atlasītājiem.
(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 */ )Vērtība satur: atribūta vērtība satur terminu kā vienīgo vērtību, vērtību vērtību sarakstā vai kā daļu no citas vērtības. Lai izmantotu šo atlasītāju, pirms vienlīdzības zīmes pievienojiet zvaigznīti (*). Piemēram, img(alt*="art")atlasīs attēlus ar alt tekstu “abstraktā māksla” un “sportists, kas sāk jaunu sporta veidu”, jo vērtība “māksla” ir vārdā “sākums”.
Vērtība ir ar atstarpēm atdalītā sarakstā: vērtība ir vai nu vienīgā atribūta vērtība, vai arī tā ir vesela vērtība atstarpēs atdalītu vērtību kopā. Atšķirībā no selektora “satur”, šis atlasītājs nemeklēs vērtību kā vārda fragmentu. Lai izmantotu šo atlasītāju, pirms vienādības zīmes pievienojiet tildi (~). Piemēram, img(alt~="art")atlasīs attēlus ar alt tekstu “abstraktā māksla” un “mākslas skate”, bet ne “sportists, kurš sāk jaunu sporta veidu” (kuru atlasītu atlasītājs “satur”).
Vērtība sākas ar: atribūta vērtība sākas ar atlasīto vārdu. Lai izmantotu šo selektoru, pirms vienādības zīmes pievienojiet zīmi (^). Neaizmirstiet, nozīme ir reģistrjutībai. Piemēram, img (alt = ”art”) atlasīs attēlus ar alt tekstu “art show” un “māksliniecisko rakstu”, bet ne attēlu ar alt tekstu “Arthur Miller”, jo “Arthur” sākas ar lielo burtu .
Vērtība vispirms ir domuzīmēs atdalītā sarakstā: šis atlasītājs ir ļoti līdzīgs atlasītājam “sākas ar”. Šeit atlasītājs atbilst vērtībai, kas ir vai nu vienīgā vērtība, vai arī tā ir pirmā ar domuzīmēm atdalītā vērtību sarakstā. Lai izmantotu šo atlasītāju, pirms vienādības zīmes pievienojiet pīpes rakstzīmi (|). Piemēram, li(data-years|="1900")atlasīs saraksta vienumus ar data-yearsvērtību “1900–2000”, bet ne saraksta vienumus ar data-yearsvērtību “1800–1900”.
Vērtība beidzas ar: atribūta vērtība beidzas ar atlasīto vārdu. Lai izmantotu šo atlasītāju, pirms vienādības zīmes pievienojiet dolāra zīmi ($). Piemēram, a(href$="pdf")atlasa katru saiti, kas beidzas ar .pdf.
Piezīme par pēdiņām: Dažos gadījumos ap vērtību var likt bez pēdiņām, taču noteikumi, kas attiecas uz atlasi bez pēdiņām, ir pretrunīgi starp pārlūkprogrammām. Citāti vienmēr darbojas, tāpēc, ja pieturaties pie to izmantošanas, varat būt drošs, ka atlasītājs darbosies.
Skatiet CSS-Tricks pildspalvas atribūtu atlasītājus (@ css-tricks) vietnē CodePen.
Jautrs fakts: vērtības tiek uzskatītas par virknēm, tāpēc jums nav jāizdara kaut kas izdomāts, izvairoties no rakstzīmēm, lai tās atbilstu, tāpat kā jūs, ja klases vai ID atlasītājā izmantotu neparastas rakstzīmes.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Lielo un mazo burtu atšķirība
Atšķirīgo un mazo burtu atribūtu atlasītāji ir daļa no CSS darba grupas 4. līmeņa selektoru specifikācijas. Kā minēts iepriekš, atribūtu vērtību virknes pēc noklusējuma ir reģistrjutīgas, taču tās var mainīt uz mazo un mazo burtu, pievienojot itieši pirms beigu iekavas:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Atšķirība no mazajiem un mazajiem burtiem var būt ļoti ērta, lai atlasītu atribūtus, kuros ir neparedzams, cilvēka rakstīts teksts. Piemēram, pieņemsim, ka tērzēšanas lietotnē veidojāt runas burbuli un vēlaties ziņojumiem pievienot “vicinošu roku” ar tekstu “sveiki” kaut kādā formā. To varēja izdarīt tikai ar CSS, izmantojot visu reģistru nejutīgu salīdzinātāju, lai noķertu visas iespējamās variācijas:
Skatiet CodePen vietnē CSS-Tricks (@ css-tricks) CS atribūtu saskaņošanu ar pildspalvu un burtiem nejutīgu CSS atribūtu.
Tos apvienojot
Atribūtu atlasītāju var apvienot ar citiem atlasītājiem, piemēram, tagu, klasi vai ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Vai pat apvienojiet vairākus atribūtu atlasītājus. Šis piemērs izvēlas attēlus ar alt tekstu, kas ietver vārdu "persona", kā vienīgo vērtību vai vērtību telpu atdalītu sarakstu, un arī srcvērtību, kas ietver vērtību "Lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Skatiet CSS-Tricks atribūtus un tikai atribūtus, izmantojot CSS-Tricks (@ css-tricks).
Atribūtu atlasītāji JavaScript un jQuery
Atribūtu atlasītājus jQuery var izmantot tāpat kā jebkuru citu CSS selektoru. JavaScript jūs varat izmantot atribūtu atlasītājus ar document.querySelector()un document.querySelectorAll().
Skatiet CSS-Tricks pildspalvas atribūtu atlasītājus JS un jQuery (@ css-tricks) vietnē CodePen.
Saistīts
- klasē
- ID
Vairāk informācijas
- Nopietni atribūtu atlasītāji
- Atribūtu atlasītāji MDN
- Atribūtu atlasītāji W3C CSS spec
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jebkurš | Jebkurš | Jebkurš | Jebkurš | 7+ | Jebkurš | Jebkurš |