[CSS/DIV] Elemezze a négy fő CSS attribútumérték-választó használatát

Ez a cikk bemutatja nekedCSS tulajdonságérték-választóAz attribútumválasztó formátuma elem, majd zárójel, aattlûbilek zárójelben, vagy attribútumkifejezések (nem tudom, hogy a leírás helyes-e, saját készítésű szavak), mint például h1[title], h1[title="logo"], stb., úgy hiszem, sokat fogsz tanulni ebben a cikkben.

CSS oktató: CSS attribútumérték-választó

CSS AttributeSelectors, talán nem kellene ismeretlennek lennie az attribútumválasztókkal, lényegében az id és class selectorok valójában attribútumérték-választók, csak válaszd ki az id vagy osztály értékét.

Az attribútumválasztó formátuma elem, majd zárójel, zárójelben lévő attribútumokkal, vagy attribútumkifejezésekkel (nem tudom, hogy a leírás helyes-e, saját készítésű szavak), például h1[title], h1[title="Logo"], stb., lásd az alábbi beszélgetésemből 4 konkrét formát.

1. Egyszerű CSS attribútumérték-választó

A névtől függetlenül ez az egyszerű attribútumválasztó jellemzője.

h1[osztály]{szín:ezüst; bármely h1 elemre hat, amely osztálysal rendelkezik, függetlenül az osztály értékétől. Ezért<h1class="hoopla">Szia</h1>, <h1class="súlyos">Serenity</h1>, <h1class="fancy"> h1 Fooling</h1> szabálya befolyásolja.

Természetesen ez a "tulajdonság" nem csupán egy osztály vagy id, hanem lehet az elem összes legitim tulajdonsága, mint például img altja, például img[alt]{cssdeclarationshere; bármely IMG elemre vonatkozik, amelynek alt attribútumja van. Ekkor a[href][title]{font-weight:bold; Mi van a helyzet }? Ahogy tudod, ez olyan elemekre működik, amelyek mind href, mind cím attribútumot tartalmaznak, például <atitle="W3CHome">W3C</a>.

2. Precíz CSS attribútumérték-választó

Az id és az osztály lényegében pontos attribútumérték-választók, igen, H1#Logo egyenlő H1[id="logo"]. Ahogy korábban említettem, nem korlátozzuk magunkat az azonosítóra vagy osztályra, bármilyen tulajdonságot használhatunk! Például: a[][title="W3CHome"]{font-size:200%; } a <atitle="W3CHome">W3C-re lesz alkalmazva</a>.

3. Néhány CSS attribútumérték-választó

Ahogy a név is mutatja, amennyiben az attribútumérték részben egyezik (ebben az esetben az a rész, amely ténylegesen megegyezik az egész szóval), az elemre hat. Nézzünk egy példát:

Ezek bármelyike félkövért tehet a p betűtípust.

Ez a választó nagyon hasznos, például, ha egy illusztrációt a címében a "Figure" string stílusban szeretnél megjeleníteni, például title="Figure5:xxx description", akkor használhatod az img[title~="Figure"].

Fontos megjegyezni, hogy ahogy az első mondatban hangsúlyoztam, az egész szót kell egyeztetni, és az img[title~="Figure"] nem egyezik a title="Figure5:xxx description" kifejezéssel.

Én is csináltam egy kis tesztet: a példában a "Figure" kifejezést "Illustration"-ra változtatod, és az img[title~="Figure"] img[title~="Illustration"]-ra változtatni, és a Firefoxban is egyezik, függetlenül attól, hogy a kódolás GB2312 vagy UTF-8. Úgy tűnik, a CSS támogatás a kínai nyelven nem rossz.

4. Speciális CSS attribútumérték-választó

Elég furcsa, ez a választó. Így működik, nos, könnyebb példát adni, mint leírni.

*[lang|="en"]{color:white; Ez a szabály kiválasztja a lang attribútumának vagy az en-vel kezdődő elem értékét. Vagyis egyezik <h1lang="en">Hello!</h1>, <plang="en-us">Üdv!</p>és <divlang="en-au">Szia!</div>és nem egyezik<plang="fr">bonjour!</p>és <h3lang="cy-en">Jrooana!</h3>.