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

Ich fühle mich dumm, so lange ein Webprogrammierer gewesen zu sein und die Antwort auf diese Frage nicht zu kennen. Ich hoffe tatsächlich, dass es möglich ist und ich wusste nur nicht, was ich denke, ist die Antwort (was ist, dass es nicht möglich ist). .

Meine Frage ist, ob es möglich ist, 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 }

Was ich gerne machen würde, ist ungefähr so:

.composite 
{
   .something;
   .else
}

Dabei würde die Klasse ".composite" sowohl inline angezeigt als auch einen roten Hintergrund haben

Es gibt Tools wie WENIGER , mit denen Sie CSS auf einer höheren Abstraktionsebene erstellen können , ähnlich wie Sie es beschreiben.

Weniger nennt diese "Mixins"

Anstatt

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Du könntest sagen

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Sie können einem einzelnen DOM-Element mehrere Klassen hinzufügen, z

<div class="firstClass secondClass thirdclass fourthclass"></div>

Regeln, die in späteren Klassen angegeben werden (oder die spezifischer sind), werden außer Kraft gesetzt. So fourthclassherrscht in diesem Beispiel die Art vor.

Vererbung ist nicht Teil des CSS-Standards.

Ja, aber nicht genau mit dieser Syntax.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Halten Sie Ihre gemeinsamen Attribute zusammen und weisen Sie bestimmte Attribute erneut zu (oder überschreiben Sie sie).

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

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 ungefähr so ​​nah, wie Sie es leider bekommen werden. Ich würde dieses Feature gerne zusammen mit Klassen-Aliasnamen eines Tages sehen.

Nein, so etwas kann man nicht machen

.composite 
{
   .something;
   .else
}

Dies sind keine "Klassennamen" im OO-Sinne. .somethingund .elsesind nur Selektoren nichts mehr.

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

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

oder Sie könnten eine andere Form der Vererbung untersuchen

.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>

Wo die Absätze Hintergrundfarbe und Farbe von den Einstellungen im umschließenden div geerbt werden, das .foogestaltet ist. Möglicherweise müssen Sie die genaue W3C-Spezifikation überprüfen. inheritist ohnehin Standard für die meisten Eigenschaften, aber nicht für alle.

Ich bin auf dasselbe Problem gestoßen und habe schließlich eine JQuery-Lösung verwendet, um den Eindruck zu erwecken, dass eine Klasse andere Klassen erben kann.

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

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

Der SCSS- Weg für das gegebene Beispiel wäre ungefähr so:

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

.composite {
  @extend .something;
  @extend .else;
}

Weitere Informationen finden Sie in den Sass-Grundlagen

Das Beste, was Sie tun können, ist dies

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>

Vergiss nicht:

div.something.else {

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

}

In der CSS-Datei:

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

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

Mir ist klar, dass diese Frage jetzt sehr alt ist, aber hier geht nichts!

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

Wenn Sie zum Beispiel haben, .umbrellaClassdass "erbt" von .baseClass1und .baseClass2Sie könnten etwas JavaScript haben, das auf bereit ist.

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

Jetzt haben alle Elemente von .umbrellaClasswill alle Eigenschaften von beiden .baseClasss. Beachten Sie, dass die Vererbung wie die OOP-Vererbung .umbrellaClassmöglicherweise eigene Eigenschaften hat oder nicht.

Die einzige Einschränkung besteht darin, zu prüfen, ob dynamisch Elemente erstellt werden, die beim Auslösen dieses Codes nicht vorhanden sind. Es gibt jedoch auch einfache Möglichkeiten, dies zu umgehen.

Sucks CSS hat jedoch keine native Vererbung.

Perfektes Timing : Ich ging von dieser Frage zu meiner E-Mail, um einen Artikel über Less zu finden , eine Ruby-Bibliothek, die unter anderem Folgendes tut:

Da es super genauso aussieht footer, aber mit einer anderen Schriftart, verwende ich die Klasseneinbeziehungstechnik von Less (sie nennen es ein Mixin), um anzuweisen, dass auch diese Deklarationen enthalten sein sollen:

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

Leider bietet CSS keine "Vererbung" wie Programmiersprachen wie C ++, C # oder Java. Sie können eine CSS-Klasse nicht deklarieren und dann um eine andere CSS-Klasse erweitern.

Sie können jedoch mehr als eine einzelne Klasse auf ein Tag in Ihrem Markup anwenden. In diesem Fall gibt es ein ausgeklügeltes Regelwerk, das bestimmt, welche tatsächlichen Stile vom Browser angewendet werden.

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

CSS sucht nach allen Stilen, die basierend auf Ihrem Markup angewendet werden können, und kombiniert die CSS-Stile aus diesen mehreren Regeln miteinander.

Normalerweise werden die Stile zusammengeführt, aber wenn Konflikte auftreten, gewinnt der später deklarierte Stil im Allgemeinen (es sei denn, das Attribut! Important ist für einen der Stile angegeben. In diesem Fall gewinnt dieser). Stile, die direkt auf ein HTML-Element angewendet werden, haben Vorrang vor CSS-Klassenstilen.

Es gibt auch SASS, das Sie unter http://sass-lang.com/ finden . Es gibt ein @ extend-Tag sowie ein Mix-In-System. (Rubin)

Es ist eine Art Konkurrent von LESS.

Das ist in CSS nicht möglich.

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

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

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

Eine andere Möglichkeit besteht darin, zwei Klassen anzugeben:

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

Der Stil von "else" überschreibt (oder fügt) den Stil von "etwas" hinzu

Sie können mehr als eine CSS-Klasse auf ein Element anwenden, indem Sie diese Klasse = "etwas anderes" verwenden.

Wie andere bereits gesagt haben, können Sie einem Element mehrere Klassen hinzufügen.

Aber das ist nicht wirklich der Punkt. Ich bekomme Ihre Frage zur Vererbung. Der eigentliche Punkt ist, dass die Vererbung in CSS nicht über Klassen, sondern über Elementhierarchien erfolgt. Um geerbte Merkmale zu modellieren, müssen Sie sie auf verschiedene Elementebenen im DOM anwenden.

Ich habe das auch wie verrückt gesucht und es einfach herausgefunden, indem ich verschiedene Dinge ausprobiert habe: P ... Nun, so kannst du es machen:

composite.something, composite.else
{
    blblalba
}

Es hat plötzlich bei mir funktioniert :)

Unter bestimmten Umständen können Sie eine "weiche" Vererbung durchführen:

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

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

Dies funktioniert nur, wenn Sie die .composite-Klasse einem untergeordneten Element hinzufügen. Es handelt sich um eine "weiche" Vererbung, da alle in .composite nicht angegebenen Werte nicht offensichtlich vererbt werden. Denken Sie daran, es wären immer noch weniger Zeichen, einfach "Inline" und "Rot" anstelle von "Erben" zu schreiben.

Hier ist eine Liste der Eigenschaften und ob sie dies automatisch tun oder nicht: https://www.w3.org/TR/CSS21/propidx.html

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 von untergeordneten Tags aus 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 Bereiche wie im Beispiel zu verwenden, aber es ist nur ein Proof of Concept. Es gibt immer noch viele Fehler, die auftreten können, wenn Sie versuchen, CSS auf diese Weise anzuwenden. (Zum Beispiel Ändern von Textdekorationstypen).

Less und Sass sind CSS-Vorprozessoren, die die CSS-Sprache auf wertvolle Weise erweitern. Nur eine von vielen Verbesserungen, die sie anbieten, ist genau die Option, nach der Sie suchen. Es gibt einige sehr gute Antworten mit Less und ich werde die Sass-Lösung hinzufügen.

Sass verfügt über eine Erweiterungsoption, mit der eine Klasse vollständig auf eine andere erweitert werden kann. Weitere Informationen zu Extend finden Sie in diesem Artikel

Eigentlich gibt es das, wonach Sie fragen - es wird jedoch als Zusatzmodul ausgeführt. Schauen Sie sich diese Frage zu Better CSS in .NET an, um Beispiele zu finden.

Lesen Sie die Antwort von Larsenal zur Verwendung von LESS , um eine Vorstellung davon zu bekommen, was diese Add-Ons bewirken .

CSS macht nicht wirklich das, was Sie verlangen. Wenn Sie Regeln für diese zusammengesetzte Idee schreiben möchten, sollten Sie den Kompass überprüfen . Es ist ein Stylesheet-Framework, das dem bereits erwähnten Less ähnelt.

Damit können Sie Mixins und all das gute Geschäft machen.

Für diejenigen, die mit den genannten (ausgezeichneten) Beiträgen nicht zufrieden sind, können Sie Ihre Programmierkenntnisse nutzen, um eine Variable (PHP oder was auch immer) zu erstellen und die mehreren Klassennamen speichern zu lassen.

Das ist der beste Hack, den ich mir vorstellen kann.

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

Wenden Sie dann die globale Variable auf das gewünschte Element an und nicht auf die Klassennamen selbst

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Schauen Sie sich CSS compose an : https://bambielli.com/til/2017-08-11-css-modules-composes/

nach ihnen:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

Ich benutze es in meinem Reaktionsprojekt.

Stellen Sie sich CSS- Klassen nicht als objektorientierte Klassen vor, sondern als bloßes Werkzeug unter anderen Selektoren, um anzugeben, nach welchen Attributklassen ein HTML-Element gestaltet ist. Stellen Sie sich alles zwischen den geschweiften Klammern als Attributklasse vor , und Selektoren auf der linken Seite teilen den Elementen mit, dass sie Attribute von der Attributklasse erben sollen . Beispiel:

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

Wenn ein Element des Attribut gegeben ist class="foo", ist es sinnvoll , daran zu denken nicht als Attribut von Klasse zu erben .foo, sondern von Attributklasse A und Attributklasse B . Das heißt, der Vererbungsgraph ist eine Ebene tief, wobei Elemente aus Attributklassen stammen und die Selektoren angeben, wohin die Kanten gehen, und den Vorrang bestimmen, wenn konkurrierende Attribute vorhanden sind (ähnlich der Reihenfolge der Methodenauflösung).

Die praktische Implikation für die Programmierung ist dies. Angenommen, Sie haben das oben angegebene Stylesheet und möchten eine neue Klasse hinzufügen .baz, in der sie dieselbe haben sollte font-sizewie .foo. Die naive Lösung wäre 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 zweimal etwas tippen muss, werde ich so wütend! Ich muss es nicht nur zweimal schreiben, jetzt kann ich das nicht programmatisch anzeigen .foound .bazsollte es auch haben font-size, und ich habe eine versteckte Abhängigkeit geschaffen! Mein obiges Paradigma würde vorschlagen, dass ich das font-sizeAttribut aus der Attributklasse A abstrahieren sollte :

.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 hier ist, dass ich jetzt jeden Selektor aus der Attributklasse A erneut eingeben muss, um anzugeben, dass die Elemente, die sie auswählen sollen, auch Attribute aus der Attributbasisklasse A erben sollen . Die Alternativen bestehen jedoch darin, sich daran zu erinnern, jede Attributklasse zu bearbeiten, in der bei jeder Änderung versteckte Abhängigkeiten bestehen, oder ein Drittanbieter-Tool zu verwenden. Die erste Option bringt Gott zum Lachen, die zweite bringt mich dazu, mich umzubringen.

Wenn Sie einen leistungsstärkeren Textvorprozessor als WENIGER wünschen, lesen Sie den PPWizard:

http://dennisbareis.com/ppwizard.htm

Die Warnung, dass die Website wirklich abscheulich ist und eine kleine Lernkurve aufweist, eignet sich jedoch perfekt zum Erstellen von CSS- und HTML-Code über Makros. Ich habe nie verstanden, warum mehr Webcodierer es nicht verwenden.

Sie können erreichen, was Sie wollen, wenn Sie Ihre .css-Dateien über PHP vorverarbeiten. ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...