[CSS/DIV] Analüüsi nelja peamise CSS atribuudi väärtuse valija kasutamist

See artikkel kirjeldab seda teileCSS omaduse väärtuse valijaAtribuudi valija formaat on element, millele järgneb sulud, atribuudid sulgudes, või atribuudi avaldised (ma ei tea, kas kirjeldus on õige, ise loodud sõnad), näiteks h1[title], h1[title="logo"], jne, usun, et õpid sellest artiklist palju.

CSS õpetus: CSS atribuudi väärtuse valija

CSS AttributeSelectors, võib-olla ei tohiks sa olla atribuudi valijatega võõras – sisuliselt on id ja class selectorid tegelikult atribuudi väärtuse valijad, lihtsalt vali id või klassi väärtus.

Atribuudi valija formaat on element, millele järgneb sulud, atribuudid sulgudes, või atribuudi väljendid (ma ei tea, kas kirjeldus on õige, ise loodud sõnad), näiteks h1[title], h1[title="Logo"] jne, allpool minu arutelust näed nelja konkreetset vormi.

1. Lihtne CSS atribuudi väärtuse valija

Sõltumata nimest on see lihtsa atribuudi valija tunnus.

h1[klass]{värv:hõbe; mõjub mis tahes H1 elemendile klassiga, sõltumata klassi väärtusest. Seega<h1class="hoopla">Tere</h1>, <h1class="tõsine">Serenity</h1>, <h1class="fancy"> Foolingu h1</h1> mõjutab see reegel.

Loomulikult ei ole see "omadus" lihtsalt klass või id, vaid võivad olla kõik elemendi legitiimsed omadused, näiteks img alt, näiteks img[alt]{cssdeclarationshere; kehtib igale IMG elemendile, millel on alternatiivne atribuut. Seejärel a[href][title]{font-weight:bold; Aga }? Nagu sa tead, töötab see elementide puhul, millel on nii href kui ka pealkirja atribuudid, näiteks <atitle="W3CHome">W3C</a>.

2. Täpne CSS atribuudi väärtuse valija

id ja class on sisuliselt täpsed atribuudi väärtuse valijad, jah, h1#logo on võrdne h1[id="logo"]. Nagu varem mainitud, me ei piirdu ainult id või klassiga, võime kasutada ükskõik millist omadust! Näiteks a[][title="W3CHome"]{font-size:200%; } rakendatakse <atitle="W3CHome">W3C</a>.

3. Mõned CSS atribuudi väärtuse valijad

Nagu nimigi ütleb, mõjub elemendile, kui atribuudi väärtus osaliselt vastab (antud juhul osa, mis tegelikult vastab kogu sõnale). Vaatame näidet:

Igaüks neist võib p-tähe kirjatüübi paksuks muuta.

See valik on väga kasulik, näiteks kui soovid kujundada illustratsiooni, mille pealkirjas on string "Figure", nt title="Figure5:xxx description", võid kasutada img[title~="Figure"].

Tuleb märkida, et nagu rõhutasin esimeses lauses, tuleb sobitada kogu sõna ja img[title~="Figure"] ei sobi title="Figure5:xxx description".

Tegin ka väikese testi, näiteks "Figure" muudetakse "Illustratsiooniks" ja img[title~="Figure"] img[title~="Illustration"], ning Firefoxis klapib, olenemata sellest, kas kodeerimine on GB2312 või UTF-8. Tundub, et CSS-i tugi hiina keelele pole halb.

4. Spetsiaalne CSS atribuudi väärtuse valija

Veidi imelik, see valija. See toimib nii, noh, on lihtsam tuua näidet kui kirjeldada.

*[lang|="en"]{color:white; See reegel valib atribuudi lang väärtuse või elemendi, mis algab en-. See tähendab, et see võib sobitada <h1lang="en">Tere!</h1>, <plang="en-us">Tervitused!</p>ja <divlang="en-au">Tere!</div>ja ei sobi<plang="fr">Bonjour!</p>ja <h3lang="cy-en">Jrooana!</h3>.