[CSS/DIV] Analyseer het gebruik van de vier belangrijkste CSS-attributenwaardeselectoren

Dit artikel zal het aan je beschrijvenCSS property value selectorHet formaat van de attribuutselector is element gevolgd door haakjes, met attributen tussen haakjes, of attribuutuitdrukkingen (ik weet niet of de beschrijving klopt, zelfgemaakte woorden), zoals h1[titel], h1[titel="logo"], enzovoort, ik denk dat je veel zult leren in dit artikel.

CSS Tutorial: CSS Attribuutwaarde Selector

CSS AttributeSelectors, misschien zou je niet onbekend moeten zijn met attribuutselectors; in wezen zijn id en class selectors eigenlijk attributenwaarde-selectors, selecteer gewoon de id of class value.

Het formaat van de attribuutselector is element gevolgd door haakjes, met attributen tussen haakjes, of attribuutuitdrukkingen (ik weet niet of de beschrijving klopt, zelfgemaakte woorden), zoals h1[titel], h1[titel="Logo"], enzovoort, je kunt 4 specifieke vormen zien in mijn bespreking hieronder.

1. Eenvoudige CSS-attribuutwaarde-selector

Ongeacht de naam is dit het kenmerk van de eenvoudige attribuutselector.

H1[klasse]{kleur:zilver; zal op elk H1-element met klasse werken, ongeacht de waarde van de klasse. Daarom<h1class="hoopla">Hallo</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 van Narren</h1> wordt door deze regel beïnvloed.

Natuurlijk is deze "eigenschap" niet zomaar een klasse of id, maar kan het alle legitieme eigenschappen van het element zijn, zoals img's alt, zoals img[alt]{cssdeclarationshere; Dat geldt voor elk IMG-element met het ALT-attribuut. Dan a[href][title]{font-weight:bold; En wat dacht je van }? Zoals je weet werkt dit op elementen met zowel href- als titelattributen, zoals <atitle="W3CHome">W3C</a>.

2. Precieze CSS-attribuutwaardeselector

ID en klasse zijn in wezen exacte attribuutwaarde-selectoren, ja, h1#logo is gelijk aan h1[id="logo"]. Zoals eerder genoemd, beperken we ons niet tot id of klasse, we kunnen elk eigendom gebruiken! Bijvoorbeeld, a[][title="W3CHome"]{font-size:200%; } wordt toegepast op <atitle="W3CHome">W3C</a>.

3. Sommige CSS-attribuutwaardeselectors

Zoals de naam al aangeeft, zolang de attribuutwaarde gedeeltelijk overeenkomt (in dit geval het deel dat daadwerkelijk overeenkomt met het hele woord), zal het op het element inwerken. Laten we naar een voorbeeld kijken:

Elk van deze kan het lettertype van de p vetgedrukt maken.

Deze selector is erg handig, bijvoorbeeld als je een illustratie wilt stylen met de string "Figure" in de titel, bijvoorbeeld titel="Figure5:xxx description", kun je img[title~="Figure"] gebruiken.

Het moet worden opgemerkt dat, zoals ik in de eerste zin benadrukte, je het hele woord moet overeenkomen, en img[title~="Figure"] niet overeenkomt met title="Figure5:xxx description".

Ook heb ik een kleine test gedaan: je verandert "Figuur" in het voorbeeld in "Illustratie", en verandert img[title~="Figuur"] in img[title~="Illustratie"], en het komt nog steeds overeen in Firefox, ongeacht of de codering GB2312 of UTF-8 is. Het lijkt erop dat CSS-ondersteuning voor Chinezen niet slecht is.

4. Speciale CSS-attribuutwaardeselector

Best vreemd, deze selector. Het werkt zo, nou, het is makkelijker om een voorbeeld te geven dan het te beschrijven.

*[lang|="en"]{color:white; Deze regel kiest de waarde van het attribuut lang of het element dat begint met en-. Dat wil zeggen, het kan overeenkomen met <h1lang="en">Hallo!</h1>, <plang="en-us">Groeten!</p>en <divlang="en-au">G'day!</div>en komt niet overeen<plang="fr">Bonjour!</p>en <h3lang="cy-en">Jrooana!</h3>.