[CSS/DIV] Analizirajte uporabo štirih glavnih izbirnikov vrednosti atributov CSS

Ta članek vam bo to opisalCSS izbirnik vrednosti lastnostiOblika izbirnika atributov je element, ki mu sledijo oklepaji, z atributi v oklepajih ali izrazi atributov (ne vem, ali je opis pravilen, samoustvarjene besede), kot so h1[title], h1[title="logo"] itd., verjamem, da se boste v tem članku veliko naučili.

CSS vodič: Izbirnik vrednosti atributov CSS

CSS AttributeIzbirniki, morda ne bi smeli biti neznani z izbirniki atributov, v bistvu izbirniki id in razredov so dejansko izbirniki vrednosti atributov, samo izberite id ali vrednost razreda.

Oblika izbirnika atributov je element, ki mu sledijo oklepaji, z atributi v oklepajih, ali izrazi atributov (ne vem, ali je opis pravilen, samoustvarjene besede), kot so h1[title], h1[title="Logo"] itd., spodaj lahko vidite 4 specifične oblike iz moje razprave.

1. Preprost CSS izbirnik vrednosti atributov

Ne glede na ime je to značilnost preprostega izbirnika atributov.

h1[razred]{color:silver; bo deloval na katerikoli element h1 z razredom, ne glede na vrednost razreda. Zato<h1class="hoopla">Pozdravljeni</h1>, <h1class="seriouse">Serenity</h1>, <h1class="fancy"> h1 Fooling</h1> bo pod vplivom tega pravila.

Seveda ta "lastnost" ni le razred ali id, ampak lahko so vse legitimne lastnosti elementa, kot je img-ov alt, kot je img[alt]{cssdeclarationshere; To velja za vsak element IMG z atributom Alt. Nato a[href][title]{font-weight:bold; Kaj pa }? Kot veste, to deluje na elementih, ki imajo tako href kot title atribute, kot so <atitle="W3CHome">W3C</a>.

2. Natančen izbirnik vrednosti atributov CSS

id in class sta v bistvu natančna izbirnika vrednosti atributa, da, h1#logo je enak h1[id="logo"]. Kot je bilo že omenjeno, se ne omejujemo na identiteto ali razred, lahko uporabimo katerokoli lastnost! Na primer, a[][title="W3CHome"]{font-size:200%; } bo uporabljen za <atitle="W3CHome">W3C</a>.

3. Nekateri izbirniki vrednosti atributov v CSS

Kot že ime pove, dokler se vrednost atributa delno ujema (v tem primeru del, ki dejansko ustreza celotni besedi), deluje na element. Poglejmo primer:

Katera koli od teh lahko naredi pisavo črke p krepko.

Ta selektor je zelo uporaben, na primer, če želite ilustracijo oblikovati z nizom "Figure" v naslovu, npr. title="Figure5:xxx description", lahko uporabite img[title~="Figure"].

Treba je omeniti, da kot sem poudaril v prvem stavku, morate ujeti celotno besedo, img[title~="Figure"] pa ne bo ustrezal title="Figure5:xxx opis".

Prav tako sem naredil majhen test, v primeru spremeniš "Figure" v "Illustration" in img[title~="Figure"] v img[title~="Illustration"], in še vedno se ujema v Firefoxu, ne glede na to, ali je kodiranje GB2312 ali UTF-8. Zdi se, da podpora CSS za kitajščino ni slaba.

4. Posebni izbirnik vrednosti atributov CSS

Malce čudno, ta izbirnik. Deluje takole, lažje je dati primer kot opisati.

*[lang|="en"]{color:white; To pravilo bo izbralo vrednost atributa lang ali elementa, ki se začne z en-. To pomeni, da se lahko ujema z <h1lang="en">Pozdravljeni!</h1>, <plang="en-us">Pozdravljeni!</p>in <divlang="en-au">Živjo!</div>in se ne ujema<plang="fr">Bonjour!</p>in <h3lang="cy-en">Jrooana!</h3>.