[CSS/DIV] Analizați utilizarea celor patru selectori majori de valoare a atributelor CSS

Acest articol îți va descrie acest lucruSelector de valori ale proprietăților CSSFormatul selectorului de atribute este element urmat de paranteze, cu atribute între paranteze, sau expresii de atribute (nu știu dacă descrierea este corectă, cuvinte create de mine), cum ar fi h1[titlu], h1[titlu="logo"], etc., cred că vei învăța multe în acest articol.

Tutorial CSS: Selector de valori ale atributelor CSS

CSS AttributeSelectors, poate nu ar trebui să fii nefamiliarizat cu selectorii de atribute, în esență, selectorii id și class sunt de fapt selectori de valoare a atributului, doar selectează id sau valoarea clasei.

Formatul selectorului de atribute este element urmat de paranteze, cu atribute între paranteze, sau expresii de atribute (nu știu dacă descrierea este corectă, cuvinte create de mine), cum ar fi h1[titlu], h1[titlu="Logo"], etc., poți vedea 4 forme specifice din discuția mea de mai jos.

1. Selector simplu de valoare a atributelor CSS

Indiferent de nume, aceasta este caracteristica selectorului simplu de atribute.

h1[class]{color:silver; va acționa asupra oricărui element h1 cu clasă, indiferent de valoarea clasei. Prin urmare<h1class="hoopla">Salut</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy > h1 din Fooling</h1> vor fi afectate de această regulă.

Desigur, această "proprietate" nu este doar o clasă sau id, ci poate fi toate proprietățile legitime ale elementului, cum ar fi alt-ul lui img, cum ar fi img[alt]{cssdeclarationshere; Se aplică oricărui element IMG cu atributul alternativ. Apoi a[href][titlu]{font-weight:bold; Dar }? După cum știți, acest lucru funcționează pe elemente cu atribute href și title, cum ar fi <atitle="W3CHome">W3C</a>.

2. Selector precis de valoare a atributelor CSS

ID și Class sunt practic selectoare exacte ale valorii atributelor, da, h1#logo este egal cu h1[id="logo"]. După cum am menționat mai devreme, nu ne limităm la ID sau clasă, putem folosi orice proprietate! De exemplu, a[][title="W3CHome"]{font-size:200%; } va fi aplicat la <atitle="W3CHome">W3C</a>.

3. Unele selectoare de valori de atribute CSS

După cum sugerează și numele, atâta timp cât valoarea atributului se potrivește parțial (în acest caz, partea care corespunde efectiv cu întregul cuvânt) va acționa asupra elementului. Să vedem un exemplu:

Oricare dintre acestea poate face ca fontul p-ului să fie îngroșat.

Acest selector este foarte util, de exemplu, dacă vrei să stilizezi o ilustrație cu șirul "Figure" în titlu, de exemplu title="Figure5:xxx description", poți folosi img[title~="Figure"].

Trebuie menționat că, așa cum am subliniat în prima propoziție, trebuie să potrivești întregul cuvânt, iar img[title~="Figure"] nu se va potrivi cu descrierea title="Figure5:xxx".

De asemenea, am făcut un mic test, schimbi "Figure" în "Illustration" în exemplu și schimbi img[title~="Figure"] în img[title~="Illustration"], și tot se potrivește în Firefox, indiferent dacă codificarea este GB2312 sau UTF-8. Se pare că suportul CSS pentru chineză nu este rău.

4. Selector special de valoare pentru atribute CSS

E cam ciudat, selectorul ăsta. Funcționează așa, ei bine, e mai ușor să dai un exemplu decât să-l descrii.

*[lang|="en"]{color:white; Această regulă va selecta valoarea atributului lang sau elementul care începe cu en-. Adică, poate corespunde <h1lang="en">Salut!</h1>, <plang="en-us">Salutări!</p>și <divlang="en-au">Salut!</div>și nu se potrivește<plang="fr">Bonjour!</p>și <h3lang="cy-en">Jrooana!</h3>.