Obstaja veliko načinov, kako lahko izberete elemente v CSS. Najosnovnejša izbira je po imenu oznake, na primer p ( ). Skoraj vse bolj specifično kot izbirnik oznak uporablja atribute - classin IDoba izbereta te atribute v elementih HTML. Ampak classin IDniso edini atributi, ki jih lahko izberejo razvijalci. Kot izbirnike lahko uporabimo kateri koli atribut elementa.
Izbira lastnosti ima posebno sintakso. Tu je primer:
a(href="https://css-tricks.com") ( color: #E18728; )To je izbirnik natančnega ujemanja, ki bo izbral samo povezave z natančno hrefvrednostjo atributa »https://css-tricks.com«.
Sedem različnih vrst
Izbirniki atributov privzeto razlikujejo med velikimi in malimi črkami (glejte spodnje ujemanje med velikimi in malimi črkami) in so zapisani v oklepajih ().
Z izbirnikom atributov lahko najdete sedem različnih vrst ujemanj, sintaksa pa se pri vsakem razlikuje. Vsak od bolj zapletenih izbirnikov atributov gradi na sintaksi izbirnika natančnega ujemanja - vsi se začnejo z imenom atributa in končajo z znakom enačbe, ki mu sledijo vrednosti atributov, ponavadi v narekovajih. Kar se razlikuje med imenom atributa in znakom enačbe, je tisto, kar razlikuje med izbirniki.
(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 */ )Vrednost vsebuje: vrednost atributa vsebuje izraz kot edino vrednost, vrednost na seznamu vrednosti ali kot del druge vrednosti. Če želite uporabiti ta izbirnik, pred zvezdico enačbe dodajte zvezdico (*). Izbral bo na primer img(alt*="art")slike z nadomestnim besedilom »abstraktna umetnost« in »športnik, ki začne nov šport«, ker je vrednost »umetnost« v besedi »začenja«.
Vrednost je na presledku ločenem seznamu: vrednost je bodisi edina vrednost atributa ali pa je celotna vrednost v naboru vrednosti, ločenih s presledkom. Za razliko od izbirnika »vsebuje« ta izbirnik vrednosti ne bo iskal kot besedni fragment. Če želite uporabiti ta izbirnik, dodajte tildo (~) pred znakom enačbe. Na primer, img(alt~="art")bo izbral slike z nadomestnim besedilom »abstraktna umetnost« in »umetniška predstava«, ne pa tudi »športnik, ki začne nov šport« (kar bi izbral izbirnik »vsebuje«).
Vrednost se začne z: vrednost atributa se začne z izbranim izrazom. Če želite uporabiti ta izbirnik, dodajte znak (^) pred znak enakosti. Ne pozabite, občutljivost na velike in male črke je pomembna. Na primer, img (alt = "art") bo izbral slike z nadomestnim besedilom "art show" in "umetniški vzorec", ne pa tudi slike z nadomestnim besedilom "Arthur Miller", ker se "Arthur" začne z veliko začetnico .
Vrednost je prva na seznamu, ločenih s pomišljaji: Ta izbirnik je zelo podoben izbirniku »začne se z«. Tu se izbirnik ujema z vrednostjo, ki je bodisi edina ali pa je prva na seznamu vrednosti, ločenih s pomišljaji. Če želite uporabiti ta izbirnik, dodajte znak pipe (|) pred znak enakosti. Na primer li(data-years|="1900")bo izbral elemente seznama z data-yearsvrednostjo "1900-2000", ne pa tudi elementa seznama z data-yearsvrednostjo "1800-1900".
Vrednost se konča z: vrednost atributa se konča z izbranim izrazom. Če želite uporabiti ta izbirnik, dodajte znak za dolar ($) pred znakom enakosti. Na primer, a(href$="pdf")izbere vsako povezavo, ki se konča z .pdf.
Opomba o narekovajih: V nekaterih okoliščinah lahko okoli vrednosti greste brez narekovajev, toda pravila za izbiranje brez narekovajev niso v skladu med brskalniki. Citati vedno delujejo, zato, če se držite njihove uporabe, ste prepričani, da bo izbirnik deloval.
Oglejte si izbirnike lastnosti peresa s strani CSS-Tricks (@ css-tricks) na CodePen.
Zabavno dejstvo: vrednosti se obravnavajo kot nizi, zato vam ni treba narediti nobenega modnega ubežavanja znakov, da bi se ujemali, kot če bi uporabili nenavadne znake v izbirniku razreda ali ID.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Ujemanje med velikimi in malimi črkami
Izbirniki atributov, ki ne razlikujejo med velikimi in malimi črkami, so del specifikacije izbirnikov 4. stopnje delovne skupine CSS. Kot smo že omenili, so nizi vrednosti atributov privzeto občutljivi na velike in male črke, vendar jih je mogoče spremeniti v neobčutljive na velike črke, tako da dodate itik pred zaključno oklepajo:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Ujemanje med velikimi in malimi črkami bi bilo lahko zelo priročno za ciljanje na atribute, ki vsebujejo nepredvidljivo besedilo, napisano s strani ljudi. Recimo, da ste v aplikaciji za klepet oblikovali oblaček z besedo in ste želeli vsem sporočilom z besedo »zdravo« v neki obliki dodati »mahajočo roko«. To lahko storite samo s CSS-jem, tako da z ujemanjem, ki ne razlikuje med velikimi in malimi črkami, ujamete vse možne različice:
Oglejte si ujemanje atributov CSS, ki ne ustrezajo pisavam, s CSS-triki (@ css-triki) na CodePen.
Njihova kombinacija
Izbirnik atributov lahko kombinirate z drugimi izbirniki, kot so oznaka, razred ali ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Ali celo kombinirati več izbirnikov atributov. Ta primer izbere slike z nadomestno besedilo, ki vključuje besedo "oseba" kot edino vrednost ali vrednost v prostoru ločen seznam, in je srcvrednost, ki vključuje vrednost "Lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Oglejte si kombinirane atribute in izbiro samo z atributi s strani CSS-Tricks (@ css-tricks) na CodePen.
Izbirniki atributov v JavaScript in jQuery
Izbirnike atributov lahko v jQuery uporabljamo tako kot kateri koli drug izbirnik CSS. V JavaScript lahko uporabite in izbirnike atributov z document.querySelector()in document.querySelectorAll().
Oglejte si izbirnike lastnosti peresa v JS in jQuery by CSS-Tricks (@ css-tricks) na CodePen.
Sorodno
- razred
- ID
Več informacij
- Suh na izbirnikih lastnosti
- Izbirniki atributov na MDN
- Izbirniki atributov v specifikacijah W3C CSS
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Kaj | Kaj | Kaj | Kaj | 7+ | Kaj | Kaj |