[CSS/DIV] Analyzujte použití čtyř hlavních voličů hodnoty atributů v CSS

Tento článek vám to popíšeVýběr hodnoty vlastností CSSFormát výběru atributů je prvek následovaný závorkami, s atributy v závorkách nebo výrazy atributů (nevím, jestli je popis správný, jsou to slova vytvořená vlastním tvorbou), jako h1[title], h1[title="logo"] atd., věřím, že se v tomto článku hodně naučíte.

CSS tutoriál: Výběr hodnoty atributů v CSS

CSS AttributeSelectory, možná byste neměli být neobeznámeni se selektory atributů, v podstatě jsou výběrčí id a třídy ve skutečnosti selektory hodnoty atributů, stačí vybrat id nebo hodnotu třídy.

Formát výběru atributů je prvek následovaný závorkami, s atributy v závorce nebo výrazy atributů (nevím, jestli je popis správný, vlastně vytvořená slova), jako h1[title], h1[title="Logo"] atd., níže můžete vidět 4 konkrétní formy z mé diskuse.

1. Jednoduchý CSS výběr hodnoty atributů

Bez ohledu na název je to charakteristika jednoduchého výběrového nástroje atributů.

h1[třída]{color:silver; bude působit na jakýkoli prvek h1 s třídou, bez ohledu na hodnotu třídy. Proto<h1class="hoopla">Dobrý den</h1>, <h1class="silný">Klid</h1>, <h1class="fancy"> h1 Fooling</h1> bude tímto pravidlem ovlivněn.

Samozřejmě, tato "vlastnost" není jen třída nebo id, ale může být i všechny legitimní vlastnosti tohoto prvku, například img's alt, například img[alt]{cssdeclarationshere; Bude platit pro jakýkoli IMG prvek s atributem Alt. Poté a[href][title]{font-weight:bold; A co }? Jak víte, funguje to na prvcích s atributy href i title, například <atitle="W3CHome">W3C</a>.

2. Přesný CSS výběr hodnoty atributů

id a class jsou v podstatě přesné výběrčí hodnoty atributu, ano, h1#logo je rovno h1[id="logo"]. Jak už bylo zmíněno, neomezujeme se pouze na id nebo třídu, můžeme použít jakoukoli vlastnost! Například a[][title="W3CHome"]{font-size:200%; } bude aplikováno na <atitle="W3CHome">W3C</a>.

3. Některé CSS voliče hodnoty atributů

Jak název napovídá, pokud hodnota atributu částečně odpovídá (v tomto případě část, která skutečně odpovídá celému slovu), bude na prvek působit. Podívejme se na příklad:

Každá z těchto variant může udělat písmo p tučným.

Tento selektor je velmi užitečný, například pokud chcete stylizovat ilustraci s řetězcem "Figure" v názvu, např. title="Figure5:xxx description", můžete použít img[title~="Figure"].

Je třeba poznamenat, že jak jsem zdůraznil v první větě, je třeba shodovat celé slovo a img[title~="Obrázek"] nebude odpovídat title="Obrázek5:xxx popis".

Také jsem udělal malý test, změníte "Figure" na "Illustration" v příkladu a img[title~="Figure"] na img[title~="Illustration"], a ve Firefoxu to stále sedí, bez ohledu na to, zda je kódování GB2312 nebo UTF-8. Zdá se, že podpora CSS pro čínštinu není špatná.

4. Speciální CSS volič hodnoty atributů

Trochu zvláštní, tenhle selektor. Funguje to takhle, no, je snazší uvést příklad než ho popsat.

*[lang|="en"]{color:white; Toto pravidlo vybere hodnotu atributu lang nebo prvku začínajícího na en-. To znamená, že může odpovídat <h1lang="en">Dobrý den!</h1>, <plang="en-us">Zdravím!</p>a <divlang="en-au">Dobrý den!</div>a neshoduje se<plang="fr">Bonjour!</p>a <h3lang="cy-en">Jrooana!</h3>.