[CSS/DIV] Analysera användningen av de fyra huvudsakliga CSS-attributvärdesväljarna

Den här artikeln kommer att beskriva det för digCSS egenskapsvärdesväljareFormatet på attributväljaren är element följt av parenteser, med attribut inom parentes, eller attribututtryck (jag vet inte om beskrivningen är korrekt, egenskapade ord), såsom h1[titel], h1[titel="logotyp"], etc., jag tror att du kommer att lära dig mycket i den här artikeln.

CSS-handledning: CSS attributvärdesväljare

CSS AttributeSelectors, kanske borde du inte vara obekant med attributväljare, i princip är id och klassväljare faktiskt attributvärdsväljare, välj bara id eller klassvärde.

Formatet på attributväljaren är element följt av parenteser, med attribut inom parentes, eller attribututtryck (jag vet inte om beskrivningen är korrekt, egenskapade ord), såsom h1[titel], h1[titel="Logotyp"], etc., du kan se 4 specifika former i min diskussion nedan.

1. Enkel CSS-attributvärdesväljare

Oavsett namnet är detta egenskapen hos den enkla attributväljaren.

h1[klass]{färg:silver; kommer att agera på vilket H1-element som helst med klass, oavsett klassens värde. Därför<h1class="hoopla">Hej</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 av Fooling</h1> påverkas av denna regel.

Självklart är denna "egenskap" inte bara en klass eller id, utan kan vara alla legitima egenskaper hos elementet, såsom imgs alt, såsom img[alt]{cssdeclarationshere; Gäller för alla IMG-element med ALT-attributet. Sedan a[href][title]{font-weight:fetstil; Vad sägs om }? Som du vet fungerar detta på element med både href- och titelattribut, såsom <atitle="W3CHome">W3C</a>.

2. Precisen CSS-attributvärdesväljare

ID och klass är i princip exakta attributvärdesväljare, ja, h1#logo är lika med h1[id="logo"]. Som nämnts tidigare begränsar vi oss inte till id eller klass, vi kan använda vilken egendom som helst! Till exempel, a[][title="W3CHome"]{font-size:200%; } kommer att tillämpas på <atitle="W3CHome">W3C</a>.

3. Vissa CSS-attributvärdsväljare

Som namnet antyder, så länge attributvärdet delvis matchar (i detta fall den del som faktiskt matchar hela ordet) kommer det att verka på elementet. Låt oss titta på ett exempel:

Någon av dessa kan göra typsnittet på p fetstil.

Denna väljare är mycket användbar, till exempel om du vill styla en illustration med strängen "Figure" i titeln, t.ex. title="Figure5:xxx description", kan du använda img[title~="Figure"].

Det bör noteras att som jag betonade i första meningen måste du matcha hela ordet, och img[title~="Figure"] kommer inte att matcha title="Figure5:xxx description".

Jag gjorde också ett litet test, du ändrar "Figur" till "Illustration" i exemplet, och ändrar img[title~="Figure"] till img[title~="Illustration"], och det stämmer fortfarande i Firefox, oavsett om kodningen är GB2312 eller UTF-8. Det verkar som att CSS-stödet för Kina inte är dåligt.

4. Speciell CSS-attributvärdesväljare

Lite konstigt, den här selektören. Det fungerar så här, det är lättare att ge ett exempel än att beskriva det.

*[lang|="en"]{color:white; Denna regel väljer värdet på attributet lang eller elementet som börjar med en-. Det vill säga, den kan matcha <h1lang="en">Hej!</h1>, <plang="en-us">Hälsningar!</p>och <divlang="en-au">Hej!</div>och matchar inte<plang="fr">Bonjour!</p>och <h3lang="cy-en">Jrooana!</h3>.