Einfügen eines Bildes mit Klasse verwenden: vor

Question

ich ein Bild in einen div Container mit CSS wie dies am Einfügen:

.ft-folder-closed:before { 
    content: url('../ll-filetree/img/ft-plus.16.png'); 
} 

Ich möchte einige CSS anwenden Attribute zu diesem Bild, ohne sie mit der in der gemeinsam listing " content "Attribut, aber wenden Sie einen anderen Stil an, um den CSS-Overhead zu reduzieren. So etwas, aber das funktioniert natürlich nicht:

.ft-folder-closed:before { 
    content: url('../ll-filetree/img/ft-plus.16.png'); 
    inherit: ft-floder-icon; 
} 

Jede Chance, das zu tun?

Answer 1

Sie können Ihre CSS-Selektoren so gruppieren, dass dieselben Stile auf mehrere Elemente angewendet werden. Auf diese Weise können Sie dieselben Stile auf mehrere Elemente anwenden, ohne die Stile zu wiederholen.

Beispiel:

.ft-folder-icon, .ft-folder-closed:before { 
    color: red; 
} 

Das die Farbe gilt: rot; Stil sowohl zu den .ft-folder-icon Elementen als auch zum .ft-folder-closed: vor Pseudo-Elementen.

Wenn Sie beschlossen, eine CSS-Vorprozessor wie LESS zu verwenden, Sie könnten abstrakt CSS „Mixins“ ähnlich wie dies mit:

.ft-folder-closed:before{ 
    .ft-folder-icon; 
} 

Mit „Mixins“ Sie können alle Eigenschaften einer Klasse einbetten in eine andere Klasse, indem Sie den Klassennamen als eine seiner Eigenschaften angeben. Es ist sehr ähnlich zu Variablen, aber für ganze Klassen.