[CSS/DIV] Analysoi neljän pääasiallisen CSS-attribuuttiarvovalitsijan käyttöä

Tämä artikkeli kuvaa sitä sinulleCSS-ominaisuuden arvovalitsinAttribuuttivalitsijan muoto on elementti, jota seuraavat sulkeet, attribuutit sulkeissa, tai attribuuttilausekkeet (en tiedä onko kuvaus oikea, itse luotuja sanoja), kuten h1[title], h1[title="logo"], jne., uskon, että opit paljon tästä artikkelista.

CSS-opas: CSS-attribuuttiarvojen valitsija

CSS AttributeSelectors, ehkä sinun ei pitäisi olla vieras attribuuttivalitsijoista, käytännössä id ja class selectors ovat itse asiassa attribuuttiarvojen valitsijoita, valitse vain id- tai luokka-arvo.

Attribuuttivalitsijan muoto on elementti, jota seuraavat sulkeet, ja attribuutit sulkeissa tai attribuuttilausekkeet (en tiedä onko kuvaus oikea, itse luodut sanat), kuten h1[title], h1[title="Logo"], jne., voit nähdä neljä erityistä muotoa keskustelustani alla.

1. Yksinkertainen CSS-attribuuttiarvovalitsin

Nimestä riippumatta tämä on yksinkertaisen attribuuttivalitsijan ominaisuus.

h1[class]{color:silver; vaikuttaa mihin tahansa h1-alkioon, jolla on luokka, riippumatta luokan arvosta. Siksi<h1class="hoopla">Hei</h1>, <h1class="vakava">Serenity</h1>, <h1class="fancy"> h1 of Fooling</h1> vaikuttaa tähän sääntöön.

Tämä "ominaisuus" ei tietenkään ole pelkkä luokka tai id, vaan voi olla kaikki elementin legitiimit ominaisuudet, kuten img:n alt, kuten img[alt]{cssdeclarationshere; koskee mitä tahansa img-elementtiä, jolla on alt-attribuutti. Sitten a[href][title]{font-weight:bold; Entä }? Kuten tiedät, tämä toimii elementeillä, joilla on sekä href- että title-attribuutit, kuten <atitle="W3CHome">W3C</a>.

2. Tarkka CSS-attribuuttiarvovalitsin

id ja luokka ovat pohjimmiltaan tarkkoja attribuuttiarvojen valitsijoita, kyllä, h1#logo on yhtä kuin h1[id="logo"]. Kuten aiemmin mainittiin, emme rajoita itseämme henkilöllisyystodistukseen tai luokkaan, voimme käyttää mitä tahansa omaisuutta! Esimerkiksi a[][title="W3CHome"]{font-size:200%; } käytetään <atitle="W3CHome">W3C</a>.

3. Jotkut CSS-attribuuttiarvovalitsijat

Kuten nimikin kertoo, kunhan attribuuttiarvo osittain vastaa (tässä tapauksessa se osa, joka oikeasti vastaa koko sanaa), vaikuttaa elementtiin. Katsotaanpa esimerkkiä:

Mikä tahansa näistä voi tehdä p:n fontista lihavoidun.

Tämä valitsin on erittäin hyödyllinen, esimerkiksi, jos haluat tyylitellä kuvituksen, jonka otsikossa on merkkijono, esim. title="Figure5:xxx description", voit käyttää img[title~="Figure"].

On syytä huomata, että kuten korostin ensimmäisessä lauseessa, sinun täytyy vastata koko sanaa, eikä img[title~="Figure"] täsmää title="Figure5:xxx description".

Tein myös pienen testin, esimerkissä muutetaan "Figure" muotoon "Illustration" ja img[title~="Figure"] muotoon img[title~="Illustration"], ja se täsmää edelleen Firefoxissa, riippumatta siitä, onko koodaus GB2312 vai UTF-8. Vaikuttaa siltä, että CSS-tuki kiinalle ei ole huono.

4. Erityinen CSS-attribuuttiarvovalitsin

Aika outoa, tämä valitsin. Se toimii näin, no, on helpompi antaa esimerkki kuin kuvailla sitä.

*[lang|="en"]{color:white; Tämä sääntö valitsee lang-attribuutin arvon tai alkion, joka alkaa en-. Eli se voi vastata <h1lang="en">Hei!</h1>, <plang="en-us">Tervehdys!</p>ja <divlang="en-au"> päivää!</div>eikä täsmää<plang="fr">Bonjour!</p>ja <h3lang="cy-en">Jrooana!</h3>.