Jak używać określonego słowa z klasy w css?

Question

mam pewne '<a> <i> <label>' w moją stronę jak poniżej z klasą

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

muszę utworzyć css z margin-right:10px gdy klasa zacząć "icon-"

niektóre rzeczy jak poniżej:

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

Answer 1

Try to:

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

Answer 2

można użyć jak ten

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

Gwiazda wyznacza że wartość postępowanie musi pojawić się gdzieś w wartości klasowej. W ten sposób ten obejmuje icon-

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

To Cinch symbolem karatowego. Jest najczęściej używany w wyrażeniach regularnych do oznaczania początku ciągu znaków. Jeśli chcemy kierować wszystkie tagi o numerze class zaczynającym się od icon-, możemy użyć selektora podobnego do urywków pokazanych powyżej.

Answer 3

Można również użyć składni kreska-mecz:

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

To będzie prawidłowo dopasować:

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

... z dodatkowe korzyści z również dopasowanie coś takiego:

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

... podczas gdy nadal nie można tego ukryć:

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

Takie podejście ma pewne ograniczenia zbyt:

• nie wybiorą, czy istnieje white-space po „ikony”
• ikon musi być na początku napisu atrybutu class (jak z ^=)

Testy tutaj: http://jsfiddle.net/mhfaust/Bh95t/