[CSS / DIV] Analizējiet četru galveno CSS atribūtu vērtību atlasītāju lietojumu

Šis raksts jums to aprakstīsCSS rekvizītu vērtību atlasītājsAtribūta atlasītāja formāts ir elements, kam seko iekavas, ar atribūtiem iekavās vai atribūtu izteiksmēm (es nezinu, vai apraksts ir pareizs, pašizveidoti vārdi), piemēram, h1 [title], h1 [title = "logo"] utt., Es uzskatu, ka jūs daudz uzzināsiet šajā rakstā.

CSS apmācība: CSS atribūta vērtības atlasītājs

CSS AttributeSelectors, varbūt jums nevajadzētu būt nepazīstamam ar atribūtu selektoriem, būtībā id un klases selektori faktiski ir atribūtu vērtību atlasītāji, vienkārši atlasiet id vai klases vērtību.

Atribūtu atlasītāja formāts ir elements, kam seko iekavas, ar atribūtiem iekavās vai atribūtu izteiksmēm (es nezinu, vai apraksts ir pareizs, pašu radīti vārdi), piemēram, h1[title], h1[title="Logo"] utt., Jūs varat redzēt 4 konkrētas formas no manas diskusijas zemāk.

1. Vienkāršs CSS atribūta vērtības atlasītājs

Neatkarīgi no nosaukuma tas ir vienkāršā atribūta selektora raksturojums.

h1[klase]{krāsa:sudrabs; Iedarbosies uz jebkuru H1 elementu ar klasi neatkarīgi no klases vērtības. Tāpēc<h1class="hoopla">Sveiki</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"></h1> šis noteikums ietekmēs muļķības.

Protams, šī "īpašība" nav tikai klase vai id, bet var būt visas elementa likumīgās īpašības, piemēram, img alt, piemēram, img[alt]{cssdeclarationshere; Attieksies uz jebkuru IMG elementu ar atribūtu alt. Tad a[href][title]{font-weight:bold; Kā ar }? Kā jūs zināt, tas darbojas ar elementiem gan ar href, gan title atribūtiem, piemēram, <atitle="W3CHome">W3C</a>.

2. Precīzs CSS atribūta vērtības atlasītājs

id un klase būtībā ir precīzi atribūtu vērtību selektori, jā, h1#logo ir vienāds ar h1[id="logo"]. Kā minēts iepriekš, mēs neaprobežojamies ar id vai klasi, mēs varam izmantot jebkuru īpašumu! Piemēram, a[][title="W3CHome"]{fonta lielums:200%; } tiks lietots <atitle="W3CHome">W3C</a>.

3. Daži CSS atribūtu vērtību atlasītāji

Kā norāda nosaukums, kamēr atribūta vērtība daļēji atbilst (šajā gadījumā daļa, kas faktiski atbilst visam vārdam), iedarbosies uz elementu. Apskatīsim piemēru:

Jebkurš no tiem var padarīt p fontu treknrakstā.

Šis selektors ir ļoti noderīgs, piemēram, ja vēlaties veidot ilustrāciju ar virkni "Attēls" tās nosaukumā, piemēram, title="Attēls5:xxx apraksts", varat izmantot img[title~="Attēls"].

Jāatzīmē, ka, kā es uzsvēru pirmajā teikumā, jums ir jāatbilst visam vārdam, un img[title~="Attēls"] nesakrīt title="Attēls5:xxx apraksts".

Es arī veicu nelielu testu, jūs maināt "Attēls" uz "Ilustrācija" piemērā un maināt img[title~="Attēls"] uz img[title~="Ilustrācija"], un tas joprojām atbilst Firefox, neatkarīgi no tā, vai kodējums ir GB2312 vai UTF-8. Šķiet, ka CSS atbalsts ķīniešu valodai nav slikts.

4. Īpašs CSS atribūta vērtības atlasītājs

Dīvaini, šis selektors. Tas darbojas šādi, labi, ir vieglāk sniegt piemēru, nekā to aprakstīt.

*[lang|="lv"]{krāsa:balta; Šī kārtula atlasīs atribūta lang vērtību vai elementu, kas sākas ar en-. Tas nozīmē, ka tas var atbilst <h1lang="en">Sveiki!</h1>, <plang="en-us">Sveicieni!</p>un <divlang="en-au">G'day!</div>un nesakrīt<plang="fr">Bonjour!</p>un <h3lang="cy-en">Jrooana!</h3>.