Kann eine CSS-Klasse eine oder mehrere andere Klassen erben?

Question

Ist es möglich, eine CSS-Klasse zu erstellen, die von einer anderen CSS-Klasse (oder mehreren) "erbt".

Nehmen wir zum Beispiel an, wir hätten:

.something { display:inline }
.else      { background:red }

Ich würde gerne etwas in dieser Art machen:

.composite 
{
   .something;
   .else
}

wo die Klasse ".composite" sowohl inline als auch mit rotem Hintergrund angezeigt würde

Answer 1

Das ist in CSS nicht möglich.

Das einzige, was in CSS unterstützt wird, ist, spezifischer zu sein als eine andere Regel:

span { display:inline }
span.myclass { background: red }

Ein Span mit der Klasse "myclass" hat beide Eigenschaften.

Eine andere Möglichkeit ist die Angabe von zwei Klassen:

<div class="something else">...</div>

Der Stil von "else" überschreibt (oder ergänzt) den Stil von "something".

Answer 2

Denken Sie nicht an css Klassen als objektorientierte Klassen, betrachten Sie sie lediglich als ein Werkzeug unter anderen Selektoren, um festzulegen, welche Attributklassen ein html-Element wird gestylt durch. Betrachten Sie alles zwischen den geschweiften Klammern als die Attributklasse , und die Selektoren auf der linken Seite weisen die ausgewählten Elemente an erben Attribute aus dem Attributklasse . Beispiel:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

Wenn ein Element mit dem Attribut class="foo" ist es sinnvoll, sie nicht als Erben von Attributen der Klasse .foo sondern von Attributklasse A y Attributklasse B . D.h., der Vererbungsgraph ist eine Ebene tiefer, wobei die Elemente sich von Attributklassen und die Selektoren geben an, wohin die Kanten gehen, und bestimmen den Vorrang, wenn es konkurrierende Attribute gibt (ähnlich wie bei der Reihenfolge der Methodenauflösung).

Die praktische Auswirkung auf die Programmierung ist folgende. Angenommen, Sie haben die oben angegebene Stilvorlage und möchten eine neue Klasse hinzufügen .baz wo es die gleiche Bedeutung haben sollte. font-size als .foo . Die naive Lösung wäre die folgende:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

Jedes Mal, wenn ich etwas zweimal tippen muss, werde ich so wütend! Nicht nur, dass ich es zweimal schreiben muss, jetzt habe ich auch keine Möglichkeit, programmatisch anzugeben, dass .foo y .baz sollten die gleichen font-size und ich habe eine versteckte Abhängigkeit! Mein obiges Paradigma würde nahelegen, dass ich die font-size Attribut von Attributklasse A :

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

Die Hauptbeschwerde ist, dass ich jetzt jeden Selektor von Attributklasse A wieder, um festzulegen, dass die Elemente, die sie auswählen sollen, auch die Attribute von Attribut Basisklasse A . Die Alternativen sind jedoch, dass man sich daran erinnern muss, jeden Tag zu bearbeiten. Attributklasse wo es bei jeder Änderung versteckte Abhängigkeiten gibt, oder die Verwendung eines Tools von Dritten. Die erste Option bringt Gott zum Lachen, bei der zweiten möchte ich mich umbringen.

Answer 3

Wie bereits erwähnt, können Sie einem Element mehrere Klassen hinzufügen.

Aber darum geht es eigentlich nicht. Ich verstehe Ihre Frage zur Vererbung. Der eigentliche Punkt ist, dass die Vererbung in CSS durchgeführt wird pas durch Klassen, sondern durch Elementhierarchien. Um also vererbte Eigenschaften zu modellieren, müssen Sie sie auf verschiedene Ebenen von Elementen im DOM anwenden.

Answer 4

Eine direkte Vererbung ist zwar nicht möglich.

Es ist möglich, eine Klasse (oder id) für ein übergeordnetes Tag zu verwenden und dann CSS-Kombinatoren zu verwenden, um das Verhalten untergeordneter Tags in der Hierarchie zu ändern.

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

Ich würde nicht vorschlagen, so viele Spannen wie im Beispiel zu verwenden, aber es ist nur ein Beweis für das Konzept. Es gibt immer noch viele Fehler, die auftreten können, wenn man versucht, CSS auf diese Weise anzuwenden. (Zum Beispiel das Ändern von Textdekorationstypen).

Answer 5

Unter bestimmten Umständen können Sie eine "weiche" Vererbung vornehmen:

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

Dies funktioniert nur, wenn Sie die Klasse .composite zu einem untergeordneten Element hinzufügen. Es handelt sich um eine "weiche" Vererbung, da alle Werte, die nicht in .composite angegeben sind, natürlich nicht vererbt werden. Denken Sie daran, dass es immer noch weniger Zeichen erfordern würde, einfach "inline" und "red" anstelle von "inherit" zu schreiben.

Hier finden Sie eine Liste von Immobilien, bei denen dies automatisch geschieht: https://www.w3.org/TR/CSS21/propidx.html