[CSS/DIV] Analyser brugen af de fire store CSS-attributværdivælgere

Denne artikel vil beskrive det for digCSS egenskabsværdivælgerFormatet på attributvælgeren er element efterfulgt af parenteser, med attributter i parentes, eller attributudtryk (jeg ved ikke, om beskrivelsen er korrekt, selvoprettede ord), såsom h1[title], h1[title="logo"], osv., jeg tror, du vil lære meget i denne artikel.

CSS Tutorial: CSS Attributværdi Vælger

CSS AttributeSelectors, måske bør du ikke være ukendt med attributvælgere, i bund og grund er id og klassevælgere faktisk attributværdivælgere, vælg bare id eller klasseværdi.

Formatet på attributvælgeren er element efterfulgt af parenteser, med attributter i parentes eller attributudtryk (jeg ved ikke, om beskrivelsen er korrekt, selvoprettede ord), såsom h1[title], h1[title="Logo"], osv., du kan se 4 specifikke former i min diskussion nedenfor.

1. Simpel CSS-attributværdivælger

Uanset navnet er dette karakteristikaen ved den simple attributvælger.

h1[klasse]{farve:sølv; vil virke på ethvert H1-element med klasse, uanset klassens værdi. Derfor vil h1class<="hoopla">Hej</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 af Fooling</h1> blive påvirket af denne regel.

Selvfølgelig er denne "egenskab" ikke bare en klasse eller id, men kan være alle legitime egenskaber ved elementet, såsom imgs alt, såsom img[alt]{cssdeclarationshere; vil gælde for ethvert IMG-element med ALT-attributtet. Så a[href][title]{font-weight:bold; Hvad med }? Som du ved, virker dette på elementer med både href- og titelattributter, såsom <atitle="W3CHome">W3C</a>.

2. Præcis CSS-attributværdivælger

id og klasse er i bund og grund nøjagtige attributværdivælgere, ja, h1#logo er lig med h1[id="logo"]. Som nævnt tidligere begrænser vi os ikke til id eller klasse, vi kan bruge enhver ejendom! For eksempel a[][title="W3CHome"]{font-size:200%; } vil blive anvendt på <atitle="W3CHome">W3C</a>.

3. Nogle CSS-attributværdivælgere

Som navnet antyder, så længe attributværdien delvist matcher (i dette tilfælde den del, der faktisk matcher hele ordet), vil det virke på elementet. Lad os se på et eksempel:

Enhver af disse kan gøre skrifttypen på p fed.

Denne vælger er meget nyttig, for eksempel hvis du vil style en illustration med strengen "Figure" i titlen, f.eks. title="Figure5:xxx description", kan du bruge img[title~="Figure"].

Det skal bemærkes, at som jeg understregede i første sætning, skal du matche hele ordet, og img[title~="Figure"] vil ikke matche title="Figure5:xxx description".

Jeg lavede også en lille test, hvor du ændrer "Figure" til "Illustration" i eksemplet, og ændrer img[title~="Figure"] til img[title~="Illustration"], og det matcher stadig i Firefox, uanset om kodningen er GB2312 eller UTF-8. Det virker til, at CSS-støtten til Kina ikke er dårlig.

4. Speciel CSS-attributværdivælger

Lidt mærkeligt, denne selector. Det fungerer sådan her, det er nemmere at give et eksempel end at beskrive det.

*[lang|="en"]{color:white; Denne regel vælger værdien af attributt-lang eller elementet, der starter med en-. Det vil sige, den kan matche <h1lang="en">Hej!</h1>, <plang="en-us">Hilsner!</p>og <divlang="en-au">Hej!</div>og matcher ikke<plang="fr">Bonjour!</p>og <h3lang="cy-en">Jrooana!</h3>.