ich habe einige '<a> <i> <label>' in meine Seite wie unten mit der KlasseWie bestimmte Wörter aus der Klasse in CSS verwenden?
<a class="icon-home"></a>
<label class="icon-pencil"></label>
<i class="icon-display"></i>
ich brauche mit margin-right:10px CSS zu erstellen, wenn Klasse mit "icon-"
soetwas wie unten beginnen:
<style>
.icon-* {margin-right:10px}
</style>
Try dies:
[class^="icon-"], [class*=" icon-"] {
margin-right: 10px;
}
@Zenith Ich weiß, aber was ist, wenn er zwei Klassen hat? –
Ich habe den Platz vor dem zweiten nicht bemerkt - gute Arbeit :) – lifetimes
Was ist besser für die Leistung - tun Sie einen Selektor wie dies oder fügen Sie eine zusätzliche Klasse namens Symbol zu allen Objekten und dann mit '.icon {}'? – Pete
können Sie dieses
[class*="icon-"]{ margin-right:10px; }
Der Stern bezeichnet verwenden, dass das Verfahren Wert irgendwo im Klassenwert erscheinen. Auf diese Weise deckt diese icon-
[class^="icon-"]{ margin-right:10px; }
Dies ist ein Kinderspiel mit dem Karat-Symbol ist. Es wird am häufigsten in regulären Ausdrücken verwendet, um den Anfang einer Zeichenfolge festzulegen. Wenn wir alle Tags mit einer class, die mit icon- beginnt, als Ziel verwenden möchten, könnten wir einen Selektor verwenden, der dem oben gezeigten Snippet ähnelt.
Ich sehe nicht, wo "Col" mit dieser Frage etwas zu tun hat - können Sie bitte erläutern? –
es ist ein Klassenname Sie können es nach Ihren Wünschen ändern –
@MarkSchultheiss Ich habe meine Antwort aktualisiert, was Sie jetzt sagen –
Sie auch die Strich-Spiel Syntax verwenden:
[class|="icon"]{ margin-right:10px; }
Das wird richtig passen:
<a class="icon-home"></a>
<label class="icon-pencil"></label>
<i class="icon-display"></i>
... mit dem Nutzen hinzugefügt der auch wie etwas passend:
<a class="icon"></a> /* No hyphen required */
... während dies immer noch aus:
<a class="icons"></a>
/* Won't match this. "icon" can *only* be followed by a dash */
Dieser Ansatz hat auch einige Einschränkungen:
^=)Tests hier: http://jsfiddle.net/mhfaust/Bh95t/
Ich würde eine andere Klasse hinzufügen und das verwenden, wenn ich dies tun würde. Beispiel: 'class =" icons icon-home ">' dann '.icons {margin-right: 10px}' –