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

Sie können die konvers Ansatz, um das gleiche Ergebnis zu erzielen - beginnen Sie mit dem Composite und entfernen Sie dann das Styling mit der unset Schlüsselwort. Beginnen Sie zum Beispiel mit dem folgenden Beispielsatz:

.composite {
    color: red;
    margin-left: 50px;
    background-color: green
}

können Sie dann den Selektor Spezifität um selektiv entfernen Stile mit unset :

.composite.no-color {
    color: unset
}

.composite.no-margin-left {
    margin-left: unset
}

.composite.no-background-color {
    background-color: unset
}

Hier ist ein JSFiddle die diesen Ansatz demonstrieren.

Ein Vorteil dieses Ansatzes besteht darin, dass die specificity der zusammengesetzten Selektoren höher ist als das Kompositum selbst, benötigen Sie nicht alle Kombinationen von Klassen, um die gewünschten Ergebnisse für mehrere Kombinationen zu erzielen:

/* Multi-unset compound selector combinations, such as the one that follows, ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above. This keeps things simple. */
.composite.no-background-color.no-color.no-margin-left {
    background-color: unset;
    color: unset;
    margin-left: unset
}

Darüber hinaus ist bei 96% Unterstützung für die unset Stichwort, die Browserabdeckung ist ausgezeichnet.

Answer 2

Perfektes Timing : Ich bin von dieser Frage zu meiner E-Mail gegangen, um einen Artikel zu finden über Weniger , eine Ruby-Bibliothek, die unter anderem diese Aufgabe übernimmt:

Seit super sieht genauso aus wie footer , aber mit einer anderen Schriftart, werde ich Less' Technik der Klasseneinbindung (sie nennen es Mixin) verwenden, um ihm zu sagen, dass es diese Deklarationen auch einschließen soll:

#super {
  #footer;
  font-family: cursive;
}

Answer 3

In der Css-Datei:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

Answer 4

Mir ist klar, dass diese Frage schon sehr alt ist, aber es geht um nichts anderes!

Wenn die Absicht ist, eine einzelne Klasse, die die Eigenschaften mehrerer Klassen impliziert, als native Lösung hinzuzufügen, würde ich die Verwendung von JavaScript/jQuery empfehlen (jQuery ist wirklich nicht notwendig, aber sicherlich nützlich)

Wenn Sie zum Beispiel Folgendes haben .umbrellaClass die "erbt" von .baseClass1 y .baseClass2 könnten Sie ein JavaScript bereithalten, das bei Bedarf ausgelöst wird.

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

Jetzt sind alle Elemente von .umbrellaClass hat alle Eigenschaften von sowohl .baseClass s. Beachten Sie, dass, wie bei der OOP-Vererbung, .umbrellaClass kann seine eigenen Eigenschaften haben, muss aber nicht.

Die einzige Einschränkung hierbei ist, dass zu berücksichtigen ist, ob es Elemente gibt, die dynamisch erstellt werden und nicht existieren, wenn dieser Code ausgelöst wird, aber auch dafür gibt es einfache Möglichkeiten.

Sucks css nicht haben native Vererbung, obwohl.

Answer 5

Leider gibt es in CSS keine "Vererbung", wie sie in Programmiersprachen wie C++, C# oder Java möglich ist. Sie können eine CSS-Klasse nicht deklarieren und sie dann mit einer anderen CSS-Klasse erweitern.

Sie können jedoch mehr als eine einzelne Klasse auf ein Tag in Ihrem Markup anwenden ... in diesem Fall gibt es einen ausgeklügelten Satz von Regeln, die bestimmen, welche tatsächlichen Stile vom Browser angewendet werden.

<span class="styleA styleB"> ... </span>

CSS sucht nach allen Stilen, die auf der Grundlage Ihres Markups angewandt werden können, und kombiniert die CSS-Stile aus diesen mehreren Regeln miteinander.

Normalerweise werden die Stile zusammengeführt, aber wenn es zu Konflikten kommt, gewinnt in der Regel der später deklarierte Stil (es sei denn, das Attribut !important ist bei einem der Stile angegeben; in diesem Fall gewinnt dieser). Außerdem haben Stile, die direkt auf ein HTML-Element angewendet werden, Vorrang vor CSS-Klassenstilen.