Kann ich von einer Klasse zur anderen erben in CSS

Question

Was mache ich mehrere Klassen für die verschiedenen Elemente schafft eine eine Hover-Klasse ist und das andere ist die nicht-Version schwebte. Nur ein oder zwei Dinge ändern sich zwischen den beiden Klassen und ich möchte nicht die gesamte Klasse kopieren und einfügen und nur eine Zeile ändern müssen.

Also, was ich möchte tun, sagen

.hoverOff { 
background-color: green; 
font-size: 14pt; 
border: 2px; 
width: 150px; 
} 

Und dann habe ich eine schweben über Klasse

.hoverOn { 
background-color: red; 
} 

ich alles andere aus der hoverOff Klasse und einzige Änderung erben wollen die Hintergrundfarbe. Kann ich mit CSS so erben und geerbte Stile in der neuen Klasse übersteuern? So wie es jetzt aussieht, kopiere ich einfach die gesamte Klasse, benenne sie um und ändere eine Zeile. Scheint ziemlich überflüssig und archaisch für mich.

Answer 1

In reinem CSS, verwenden Sie einfach beiden Klassen in Ihrem ersten Selektor:

.hoverOff, 
.hoverOn { 
    font-size: 14pt; 
    border: 2px; 
    width: 150px; 
} 
.hoverOff { 
    background-color: green; 
} 
.hoverOn { 
    background-color: red; 
} 

Wie auch immer, wenn Sie einige JS erweiterte Magie tun, würde ich empfehlen, :hover zu verwenden, wie in this answer angegeben.

Answer 2

Sie können tun, was Sie in der Frage beschreiben, aber es ist viel einfacher, nur CSS zu verwenden, um den Hover-Status für Sie mit dem :hover Pseudo-Selektor zu kümmern. Versuchen Sie folgendes:

.foo { 
 
    background-color: green; 
 
    font-size: 14pt; 
 
    border: 2px; 
 
    width: 150px; 
 
} 
 

 
.foo:hover { 
 
    background-color: red; 
 
}

<div class="foo"> 
 
    Hover over me 
 
</div>

Answer 3

die gesamte Klasse Kopieren sollte die letzte Option sein, wenn eine Option überhaupt.

Was ich tun würde, ist so etwas wie dieses:

.element { 
    background-color: green; 
    font-size: 14pt; 
    border: 2px; 
    width: 150px; 
} 

.element.on { 
    background-color: red; 
} 

.element:hover kann mehr Sinn machen; Meine Antwort ist mehr über das Teilen von CSS-Stilen.

.element.on, .element.off { 
    background-color: green; 
    font-size: 14pt; 
    border: 2px; 
    width: 150px; 
} 

.element.on { 
    background-color: red; 
} 

Schließlich CSS Pre-Compiler Sprachen haben Funktionen wie Mixins in weniger, in dem Sie eine Klasse mit Namen einer anderen Klasse zuordnen:

Alternativ können Sie die gleichen Stile, um mehrere Klassen wie folgt vergeben .

Answer 4

Wenn Sie die Vererbung im wahrsten Sinne des Wortes betrachten wollen Besuche CSS variables. Obwohl ich diese im Produktionscode nicht verwenden würde, dann ist es ein interessantes Feature, das einige coole Dinge ermöglicht:

.foo { 
 
    --bg-color: green; 
 
    background-color: var(--bg-color); 
 
    font-size: 14pt; 
 
    border: 2px; 
 
    width: 150px; 
 
} 
 

 
.foo:hover { 
 
    --bg-color: red; 
 
}

<div class="foo"> 
 
    Hover over me 
 
</div>