[CSS/DIV] Analizza l'uso dei quattro principali selettori di valore degli attributi CSS

Questo articolo te lo descriveràSelettore di valore delle proprietà CSSIl formato del selettore di attributi è elemento seguito da parentesi, con attributi tra parentesi, o espressioni di attributo (non so se la descrizione sia corretta, parole create da me), come h1[titolo], h1[titolo="logo"], ecc., credo che imparerai molto in questo articolo.

Tutorial CSS: Selezionatore di valore degli attributi CSS

CSS AttributeSelectors, forse non dovresti essere estraneo ai selettori di attributi, in sostanza, i selettori di id e classe sono in realtà selettori di valore di attributo, basta selezionare il valore di id o di classe.

Il formato del selettore di attributi è elemento seguito da parentesi, con attributi tra parentesi, o espressioni di attributo (non so se la descrizione sia corretta, parole auto-create), come h1[titolo], h1[titolo="Logo"], ecc., puoi vedere 4 forme specifiche dalla mia discussione qui sotto.

1. Selettore semplice di valore degli attributi CSS

Indipendentemente dal nome, questa è la caratteristica del semplice selettore di attributi.

H1[classe]{colore:argento; agirà su qualsiasi elemento h1 con classe, indipendentemente dal valore della classe. Pertanto<h1class="hoopla">Ciao</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 di Fooling</h1> saranno influenzati da questa regola.

Naturalmente, questa "proprietà" non è solo una classe o un id, ma può essere tutte le proprietà legittime dell'elemento, come l'alt di img, come img[alt]{cssdeclarationshere; Si applicherà a qualsiasi elemento IMG con l'attributo alternativo. Poi a[href][titolo]{font-weight:grassetto; E }? Come sapete, questo funziona su elementi con attributi sia href che title, come <atitle="W3CHome">W3C</a>.

2. Selezionatore preciso di valore degli attributi CSS

ID e Class sono essenzialmente selettori esatti di valori di attributo, sì, H1#Logo è uguale a H1[ID="Logo"]. Come detto prima, non ci limitiamo a ID o classe, possiamo usare qualsiasi proprietà! Ad esempio, a[][title="W3CHome"]{font-size:200%; } sarà applicato a <atitle="W3CHome">W3C</a>.

3. Alcuni selettori di valore di attributi CSS

Come suggerisce il nome, finché il valore dell'attributo corrisponde parzialmente (in questo caso, la parte che corrisponde effettivamente all'intera parola) agirà sull'elemento. Vediamo un esempio:

Ognuna di queste può rendere il font del p in grassetto.

Questo selettore è molto utile, ad esempio, se vuoi stilizzare un'illustrazione con la stringa "Figure" nel titolo, ad esempio title="Figure5:xxx description", puoi usare img[title~="Figure"].

Va notato che, come ho sottolineato nella prima frase, devi corrispondere all'intera parola, e img[title~="Figura"] non corrisponderà alla descrizione title="Figure5:xxx".

Inoltre, ho fatto un piccolo test: cambi "Figura" in "Illustrazione" nell'esempio, e cambi img[title~="Figure"] in img[title~="Illustration"], e corrisponde ancora in Firefox, indipendentemente dal fatto che la codifica sia GB2312 o UTF-8. Sembra che il supporto CSS per il cinese non sia male.

4. Selezionatore speciale di valore degli attributi CSS

Un po' strano, questo selettore. Funziona così, beh, è più facile fare un esempio che descriverlo.

*[lang|="en"]{color:white; Questa regola selezionerà il valore dell'attributo lang o dell'elemento che inizia con en-. Cioè, può corrispondere a <h1lang="en">Ciao!</h1>, <plang="en-us">Saluti!</p>e <divlang="en-au">Salve!</div>e non corrisponde a <plang="fr">Bonjour!</p>e <h3lang="cy-en">Jrooana!</h3>.