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

Ein Element kann mehrere Klassen annehmen:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

Und das ist leider auch schon alles, was man erreichen kann. Ich würde gerne diese Funktion sehen, zusammen mit Klasse-Aliase eines Tages.

Answer 2

Nein, Sie können nicht so etwas tun wie

.composite 
{
   .something;
   .else
}

Dies sind keine "Klassennamen" im Sinne der OO. .something y .else sind nur Selektoren, nichts weiter.

Aber Sie können entweder zwei Klassen für ein Element angeben

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

oder Sie könnten eine andere Form der Vererbung in Betracht ziehen

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

Wobei die Absätze backgroundcolor und color von den Einstellungen im umschließenden div geerbt werden, das .foo gestylt. Möglicherweise müssen Sie die genaue W3C-Spezifikation überprüfen. inherit ist bei den meisten Eigenschaften ohnehin Standard, aber nicht bei allen.

Answer 3

Ich lief in dieses gleiche Problem und endete mit einer JQuery-Lösung, um es scheinen, wie eine Klasse andere Klassen erben kann.

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

Dadurch werden alle Elemente mit der Klasse "composite" gefunden und die Klassen "something" und "else" zu den Elementen hinzugefügt. Also etwas wie <div class="composite">...</div> wird so enden:
<div class="composite something else">...</div>

Answer 4

Sie können Folgendes tun

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

Answer 5

Vergessen Sie das nicht:

div.something.else {

    // will only style a div with both, not just one or the other

}