[CSS/DIV] Analyzujte použitie štyroch hlavných výberov hodnôt atribútov CSS

Tento článok vám to opíšeVýber hodnoty nehnuteľností CSSFormát výberu atribútov je prvok nasledovaný zátvorkami, s atribútmi v zátvorkách, alebo s atribútovými výrazmi (neviem, či je popis správny, sú to vlastnoručne vytvorené slová), ako h1[title], h1[title="logo"] a podobne, verím, že sa v tomto článku veľa naučíte.

CSS tutoriál: Výber hodnoty atribútov v CSS

CSS AttributeSelectory, možno by ste nemali byť neoboznámení so výbermi atribútov, v podstate id a class selectory sú vlastne výbery hodnoty atribútov, stačí vybrať id alebo hodnotu triedy.

Formát výberu atribútov je prvok nasledovaný zátvorkami, s atribútmi v zátvorke alebo atribútovými výrazmi (neviem, či je popis správny, vlastnými slovami), ako h1[title], h1[title="Logo"] a podobne, môžete vidieť 4 konkrétne formy z mojej diskusie nižšie.

1. Jednoduchý CSS výber hodnoty atribútov

Bez ohľadu na názov je to charakteristika jednoduchého výberu atribútov.

h1[trieda]{color:silver; bude pôsobiť na akýkoľvek prvok h1 s triedou, bez ohľadu na hodnotu triedy. Preto<h1class="hoopla">Ahoj</h1>, <h1class="vážne">Serenity</h1>, <h1class="fancy"> h1 Fooling</h1> bude ovplyvnený týmto pravidlom.

Samozrejme, táto "vlastnosť" nie je len trieda alebo id, ale môžu byť všetky legitímne vlastnosti tohto prvku, napríklad img's alt, ako img[alt]{cssdeclarationshere; Bude platiť pre akýkoľvek IMG prvok s atribútom Alt. Potom a[href][title]{font-weight:bold; A čo }? Ako viete, toto funguje na prvky s atribútmi href aj title, ako napríklad <atitle="W3CHome">W3C</a>.

2. Presný výber hodnoty atribútov v CSS

id a class sú v podstate presné výbery hodnoty atribútov, áno, h1#logo je rovné h1[id="logo"]. Ako už bolo spomenuté, neobmedzujeme sa len na id alebo triedu, môžeme použiť akúkoľvek vlastnosť! Napríklad a[][title="W3CHome"]{font-size:200%; } bude aplikované na <atitle="W3CHome">W3C</a>.

3. Niektoré CSS výbery hodnoty atribútov

Ako názov napovedá, pokiaľ hodnota atribútu čiastočne zodpovedá (v tomto prípade časť, ktorá skutočne zodpovedá celému slovu), bude pôsobiť na daný prvok. Pozrime sa na príklad:

Ktorýkoľvek z nich môže spraviť písmo písmena p tučným.

Tento selektor je veľmi užitočný, napríklad ak chcete štýlovať ilustráciu s reťazcom "Figure" v názve, napr. title="Figure5:xxx description", môžete použiť img[title~="Figure"].

Treba poznamenať, že ako som zdôraznil v prvej vete, musíte zladiť celé slovo a img[title~="Figure"] nebude zodpovedať title="Obrázok5:xxx popis".

Tiež som urobil malý test, v príklade zmeníte "Figure" na "Illustration" a img[title~="Figure"] na img[title~="Illustration"], a vo Firefoxe to stále sedí, bez ohľadu na to, či je kódovanie GB2312 alebo UTF-8. Zdá sa, že podpora CSS pre čínštinu nie je zlá.

4. Špeciálny CSS výber hodnoty atribútov

Trochu zvláštne, tento výber. Funguje to takto, no, je jednoduchšie uviesť príklad, než to opísať.

*[lang|="en"]{color:white; Toto pravidlo vyberie hodnotu atribútu lang alebo prvok, ktorý začína na en-. To znamená, že môže zodpovedať <h1lang="en">Ahoj!</h1>, <plang="en-us">Pozdravujem!</p>a <divlang="en-au">Dobrý deň!</div>a nezodpovedá <plang="fr">Bonjour!</p>a <h3lang="cy-en">Jrooana!</h3>.