Cosa significa img [class * = "align"] in CSS?

Question

Che cosa significa img[class*="align"] in CSS?

Ho visto questo in molti fogli di stile, ma non sono sicuro perché è utilizzato e che cosa fa. Qualche idea?

Answer 1

Corrisponde a tutti gli elementi img che hanno una classe che contienealign.

Le specifiche, ha più informazioni su questo:

W3 Spec on CSS selectors

Answer 2

E 'un attribute selector che corrisponde a qualsiasi testo di classe img tag tra cui "allineare". Ad esempio, sarebbe partita qualsiasi dei seguenti:

<img class="dummy align test" /> 
<img class="test align-1" /> 
<img class="hello-align" /> 
<img class="abaligncd" /> 
<img class="align" /> 

Dalla documentazione (linkato sopra):

E [foo * = "bar"] - un elemento E il cui attributo "foo" valore contiene la sottostringa "bar"

Viene utilizzato nei comuni framework CSS per lo stile di più classi simili senza dover aggiungere una nuova classe identica a ciascuna. Ad esempio, se avessimo la seguente marcatura:

<p class="central para-red">Hello, world!</p> 
<p class="para-green bold">Hello, world!</p> 
<p class="para-blue">Hello, world!</p> 
<p>Hello, world!</p> 

Potremmo applicare stili a tutti gli elementi di cui p classe contiene "para-" senza dover digitare manualmente tutte le variazioni semplicemente usando:

p[class*="para-"] { ... } 

Ecco un JSFiddle example di questo in uso.