Come usare una parola particolare della classe in css?

Question

ho qualche '<a> <i> <label>' nella mia pagina come qui di seguito con la classe

<a class="icon-home"></a> 
<label class="icon-pencil"></label> 
<i class="icon-display"></i> 

Ho bisogno di creare CSS con margin-right:10px quando la classe inizia con "icon-"

qualche cosa come di seguito:

<style> 
.icon-* {margin-right:10px} 
</style> 

Answer 1

Try this:

[class^="icon-"], [class*=" icon-"] { 
    margin-right: 10px; 
} 

Answer 2

è possibile utilizzare come questo

[class*="icon-"]{ margin-right:10px; }

La stella indica che il valore di procedere deve comparire da qualche parte nel valore di classe. In questo modo, questa copre icon-

[class^="icon-"]{ margin-right:10px; }

Questo è un gioco da ragazzi con il simbolo carati. È più comunemente usato nelle espressioni regolari per designare l'inizio di una stringa. Se vogliamo scegliere come target tutti i tag che hanno un class che inizia con icon-, potremmo utilizzare un selettore simile allo snippet mostrato sopra.

Answer 3

Si potrebbe anche usare la sintassi dash-partita:

[class|="icon"]{ margin-right:10px; } 

Questo corrisponderà correttamente:

<a class="icon-home"></a> 
<label class="icon-pencil"></label> 
<i class="icon-display"></i> 

... con l'aggiunta beneficio di corrispondenza anche qualcosa di simile:

<a class="icon"></a> /* No hyphen required */ 

... mentre si tiene fuori questo:

<a class="icons"></a> 
/* Won't match this. "icon" can *only* be followed by a dash */ 

Questo approccio presenta alcune limitazioni troppo:

• non selezionerà se c'è un bianco-spazio dopo "icona"
• icona deve essere all'inizio della stringa attributo di classe (come con ^=)

Prove qui: http://jsfiddle.net/mhfaust/Bh95t/