CSS-is saab elemente valida mitmel viisil. Kõige elementaarsem valik on sildi nime järgi, näiteks p ( ). Peaaegu kõik täpsem kui siltide valija kasutab atribuute - classja IDmõlemad valivad nende HTML-elementide atribuutide hulgast. Aga classja IDei ole ainult atribuudid arendajad saavad valida. Valijatena saame kasutada mis tahes elemendi atribuute.
Atribuutide valimisel on spetsiaalne süntaks. Siin on näide:
a(href="https://css-tricks.com") ( color: #E18728; )See on täpse vaste valija, mis valib ainult lingid, mille hrefatribuudi väärtus on „https://css-tricks.com” täpne .
Seitse erinevat tüüpi
Atribuutide valijad on vaikimisi tõstutundlikud (vt allpool suurtähteta tundlikku sobitamist) ja need on kirjutatud sulgudesse ().
Atribuutide valija abil leiate seitset erinevat tüüpi vasteid ja süntaks on igaühe jaoks erinev. Kõik keerukamad atribuutide valijad tuginevad täpse vaste valija süntaksile - kõik algavad atribuudi nimega ja lõpevad võrdusmärgiga, millele järgneb atribuudi väärtus (ed), tavaliselt jutumärkides. Atribuudi nime ja võrdusmärgi vahel on see, mis muudab valijate vahel erinevust.
(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äärtus sisaldab: atribuudi väärtus väärtus sisaldab ainsana väärtust, väärtust väärtuste loendis või mõne muu väärtuse osana. Selle valija kasutamiseks lisage tärn (*) enne võrdusmärki. Näiteks img(alt*="art")valib pildid alt-tekstiga "abstraktne kunst" ja "sportlane, kes alustab uut spordiala", sest väärtus "kunst" on sõnas "alustamine".
Väärtus on tühikutega eraldatud loendis: väärtus on kas ainus atribuudiväärtus või on tühikuga eraldatud väärtushulkade kogu väärtus. Erinevalt selektorist „sisaldab” ei otsi see valija väärtust sõnakildena. Selle valija kasutamiseks lisage enne võrdusmärki tilde (~). Näiteks img(alt~="art")valib pildid alt-tekstiga „abstraktne kunst” ja „kunstinäitus”, kuid mitte „uue spordialaga alustav sportlane” (mille valib valija „sisaldab”).
Väärtus algab järgmisega: atribuudi väärtus algab valitud terminiga. Selle valija kasutamiseks lisage enne võrdusmärki märk (()). Ärge unustage, loo tundlikkus on oluline. Näiteks valib img (alt = ”art”) pildid alt-tekstiga “kunstinäitus” ja “kunstiline muster”, kuid mitte alt-tekstiga “Arthur Miller” pildi, sest “Arthur” algab suurtähega .
Väärtus on kriipsudega eraldatud loendis esimene: see valik on väga sarnane valijaga „algab”. Siin sobib valija väärtusega, mis on kas ainus väärtus või on kriipsudega eraldatud väärtuste loendis esimene. Selle valija kasutamiseks lisage enne võrdusmärki torumärk (|). Näiteks li(data-years|="1900")valib loendiüksused data-yearsväärtusega „1900–2000”, kuid mitte loendiüksused, mille data-yearsväärtus on „1800–1900”.
Väärtus lõpeb järgmisega: atribuudi väärtus lõpeb valitud terminiga. Selle valija kasutamiseks lisage enne võrdusmärki dollarimärk ($). Näiteks a(href$="pdf")valib kõik lingid, mis lõpevad .pdf-ga.
Märkus jutumärkide kohta. Mõnel juhul saate väärtuse ümber jutumärkideta minna, kuid jutumärkideta valimise reeglid on brauserite vahel vastuolus. Hinnapakkumised töötavad alati, nii et kui järgite nende kasutamist, võite olla kindel, et teie valija töötab.
Vaadake CodePenist CSS-Tricksi pliiatsi atribuutide valijaid (@ css-tricks).
Lõbus fakt: väärtusi käsitletakse stringidena, nii et nende sobitamiseks ei pea te tegema ühtegi väljamõeldud tähemärki, nagu teeksite, kui kasutaksite klassi või ID valijas ebatavalisi märke.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Suur- ja väiketähtede vastendamine
Suur- ja väiketähtedeta atribuutide valijad on osa CSS-i töörühma 4. taseme selektorite spetsifikatsioonist. Nagu eespool mainitud, on atribuudiväärtuse stringid vaikimisi tõstutundlikud, kuid neid saab vahetada suurtähteta, lisades ivahetult enne sulgu:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Suur- ja väiketähtedeta sobitamine võib olla tõesti mugav ettearvamatut, inimlikult kirjutatud teksti omavate atribuutide sihtimiseks. Oletame näiteks, et kujundasite vestlusrakenduses kõnemulli ja soovisite lisada sõnumi „lehvitav käsi”, millel oleks mingil kujul tekst „tere”. Saate seda teha ainult CSS-iga, kasutades kõigi võimalike variatsioonide püüdmiseks suurt ja väiketähti:
Vaadake CodePenist CS-Tricks (@ css-tricks) CS-Tricks (@ css-tricks) pliiatsitundetut CSS-atribuudi sobitamist.
Nende ühendamine
Atribuutide valijat saate kombineerida teiste valijatega, näiteks märgendi, klassi või ID-ga.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Või kombineerige isegi mitu atribuutide valijat. Selles näites valitakse alt-tekstiga pildid, mis sisaldavad sõna "inimene" ainsana või tühikuga eraldatud loendis oleva väärtusena jasrc väärtusega, mis sisaldab väärtust "lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Vaadake CodePenist CSS-Tricks'i pliiatsiga ühendatud atribuutide ja ainult atribuutide valikut (@ css-tricks).
Atribuutide valijad JavaScripti ja jQuery's
Atribuutide valijaid saab jQuery's kasutada nagu iga teist CSS valijat. JavaScripti abil saate kasutada atribuutide valijaid document.querySelector()ja document.querySelectorAll().
Vaadake CodeSeni saidil CSS-Tricks (@ css-tricks) JS ja jQuery pliiatsi atribuutide valijaid.
Seotud
- klass
- ID
Rohkem informatsiooni
- Kõhn atribuutide valijatel
- MDN-i atribuutide valijad
- Atribuutide valijad W3C CSS-i spetsifikatsioonis
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ükskõik | Ükskõik | Ükskõik | Ükskõik | 7+ | Ükskõik | Ükskõik |