[CSS/DIV] Analyser bruken av de fire viktigste CSS-attributtverdivelgerne

Denne artikkelen vil beskrive det for degCSS-egenskapsverdivelgerFormatet på attributtvelgeren er element etterfulgt av parenteser, med attributter i parentes, eller attributtuttrykk (jeg vet ikke om beskrivelsen stemmer, selvopprettede ord), som h1[tittel], h1[tittel="logo"], osv., jeg tror du vil lære mye i denne artikkelen.

CSS-veiledning: CSS attributtverdivelger

CSS AttributeSelectors, kanskje du ikke er ukjent med attributtvelgere, i bunn og grunn er id og klassevelgere faktisk attributtverdivelgere, bare velg id eller klasseverdi.

Formatet på attributtvelgeren er element etterfulgt av parenteser, med attributter i parentes, eller attributtuttrykk (jeg vet ikke om beskrivelsen er korrekt, selvopprettede ord), som h1[tittel], h1[tittel="Logo"], osv., du kan se 4 spesifikke former fra diskusjonen min nedenfor.

1. Enkel CSS-attributtverdivelger

Uansett navn er dette kjennetegnet til den enkle attributtvelgeren.

H1[klasse]{farge:sølv; vil virke på ethvert H1-element med klasse, uavhengig av klassens verdi. Derfor<h1class="hoopla">Hallo</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 av Fooling</h1> vil bli påvirket av denne regelen.

Selvfølgelig er denne "egenskapen" ikke bare en klasse eller id, men kan være alle legitime egenskaper ved elementet, som imgs alt, som img[alt]{cssdeclarationshere; vil gjelde for alle IMG-elementer med ALT-attributtet. Deretter a[href][title]{font-weight:bold; Hva med }? Som du vet, fungerer dette på elementer med både href- og tittelattributter, som <atitle="W3CHome">W3C</a>.

2. Presis CSS-attributtverdivelger

ID og klasse er i bunn og grunn eksakte attributtverdivelgere, ja, h1#logo er lik h1[id="logo"]. Som nevnt tidligere, begrenser vi oss ikke til id eller klasse, vi kan bruke hvilken som helst eiendom! For eksempel, a[][title="W3CHome"]{font-size:200%; } vil bli brukt på <atitle="W3CHome">W3C</a>.

3. Noen CSS-attributtverdivelgere

Som navnet antyder, så lenge attributtverdien delvis matcher (i dette tilfellet delen som faktisk matcher hele ordet), vil det virke på elementet. La oss se på et eksempel:

Hvilken som helst av disse kan gjøre fonten til p fet ut.

Denne velgeren er veldig nyttig, for eksempel hvis du vil style en illustrasjon med strengen "Figure" i tittelen, f.eks. title="Figure5:xxx description", kan du bruke img[title~="Figure"].

Det bør bemerkes at som jeg understreket i første setning, må du matche hele ordet, og img[title~="Figure"] vil ikke matche title="Figure5:xxx description".

Jeg gjorde også en liten test, du endrer "Figure" til "Illustration" i eksempelet, og endrer img[title~="Figure"] til img[title~="Illustration"], og det matcher fortsatt i Firefox, uansett om kodingen er GB2312 eller UTF-8. Det virker som CSS-støtten for kinesisk ikke er dårlig.

4. Spesiell CSS-attributtverdivelger

Litt merkelig, denne velgeren. Det fungerer slik, vel, det er lettere å gi et eksempel enn å beskrive det.

*[lang|="en"]{color:white; Denne regelen vil velge verdien av attributtlanget eller elementet som starter med en-. Det vil si, den kan matche <h1lang="en">Hallo!</h1>, <plang="en-us">Hilsener!</p>og <divlang="en-au">Hei!</div>og matcher ikke<plang="fr">Bonjour!</p>og <h3lang="cy-en">Jrooana!</h3>.