css von einer Klasse in einer anderen kopieren?

StackOverflow https://stackoverflow.com/questions/1211511

  •  06-07-2019
  •  | 
  •  

Frage

Das mag wie eine sehr grundlegende Frage erscheinen, aber ich schien nicht eine Antwort darauf zu finden. Ich weiß, es ist möglich, eine CSS-Regel für mehr als ein Element auf einmal als solche zu definieren: 

.element1, .element2{
  font-size:14px;
}

Ist es jedoch möglich, das zu tun, genau die gleiche Sache, aber die CSS-Element anwenden, nachdem die CSS für element1 definiert wurde? So etwas wie folgt aus: 

.element1{
  font-size:14px;
}

/*later in the css... or in a separate file*/

.element2{
 like:".element1";
 font-weight:bold;
}

Damit element2 erbt jetzt die CSS des Elements ein. Der Grund, warum ich versuche, dies zu tun ist, weil ich eine CSS-Definition für einen element1 habe, die für alle Seiten der Website lädt. Dann wird für eine bestimmte Seite (dh lädt die Haupt-CSS-Datei, zusammen mit seiner eigenen) Ich möchte den Stil von element1 verwenden und es hinzuzufügen. Was ich versuche, ist der Laden die Definition für element2 für alle Seiten auf der Website zu vermeiden (einschließlich denen, die nicht einmal Element haben Sie [s] mit der Klasse element2.

Könnte dies geschehen? Ich weiß, ich könnte dies leicht erreichen mit jQuery (d $(".element2").addClass(".element1");), aber ich möchte mit Hilfe von Skripten für meine CSS vermeiden.

Danke!

War es hilfreich?

Lösung

Sie können mit: 

<div class="element1 element2">

, während mit 

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

und so werden beide Klassen gelten. jQuery ist intelligent genug, um Klassen hinzuzufügen und zu entfernen Klassen wie folgt aus.

Sie können auch etwas weiter fortgeschritten wie SASS die alows Mixins.

Andere Tipps

Soweit ich weiß, nein, das ist nicht möglich, mit CSS allein. Du hast bereits einen Weg, um Ihre Ziele zu erreichen, identifiziert, und ich muß zeigen, dass es der bessere Weg.

In CSS kann eine Klasse nur von seinem übergeordneten erben, und nur dann, wenn <example-attribute>: inherit; (habe ich verwendet, um dieses mit color:, background-color:, font-family:, font-size: unter anderem, obwohl ich Sie warnen, dass, wenn die font-size der Mutter eine Größe beschrieben wie eine Zunahme oder Abnahme der font-size wird auch in dem Kind ändern.

CSS wirklich braucht diese Funktionalität. mehrere Klassen auf Elementebene Angeben ist groß, aber nicht das gleiche wie in der Lage zu gehen: 

.my_class { class:my_global_class; }

Die Möglichkeit, eine Klasse Verwendung Stile von einer anderen Klasse zu haben, wäre sehr mächtig sein. Es wäre in diesem Teil des Vererbungsmodell in die CSS bewegen, wo es hingehört, weniger überladen Markup zu verlassen.

Ich arbeite an einer Seite im Moment, wo wir viele verschiedene Kombinationen von Schriftarten haben. Einige h und p-Tags anders aussehen, je nach ihrer Seite und Kontext. Es ist ein echten Schmerzen mit unserer Liste von Fonts für font-Familie haben, die in jeder Klasse bestehen, wo wir sie brauchen. Ich würde gerne in der Lage sein, dies zu tun: 

/* defualt for p tags */
p { font-family:Times, Arial, Helvetica; }

/* exceptions */
.arial {font-family:Arial, Times, Helvetica; }
.segoe {font-family:Segoe, Arial, Helvetica; }

.my-page1 p {class:arial;}
.my-page2 p {class:segoe;}

In dem obigen, meine Liste der Schriftart in einem zentralen Ort existieren würde, und ich kann sie anwenden, wo immer ich will, rein in der CSS-Datei. Wenn ich 100 p-Tags in meiner Seite haben, dann muss ich für diese Ausnahmen zu jedem von ihnen eine „Klasse“ hinzufügen, die ein Schmerz sein kann. Dies gilt insbesondere, wenn Sie mehrere Entwickler an einem Standort arbeiten.

Von dem, was Sie beschreiben Sie .element1 auf mehreren Seiten zur Verfügung und verwendet werden, aber auf wenig Ausnahme Seiten Sie Elemente, die die .element1 Klasse Implementierung anders aussehen, in Ihrem Beispiel fett.

Die Antwort, die Sie gegeben wurden, ist auf jeden Fall ein Ansatz und wird auf jeden Fall arbeiten. Etwas anderes Sie tun können, ist jedoch zusätzliche CSS auf den außergewöhnlichen Seiten aufzunehmen.

Zum Beispiel können Sie eine allpages.css haben, die in allen Seiten umfassen und enthält die CSS: 

.element1 {
    font-size: 14px;
}

Dann können Sie eine separate CSS-Datei exceptions.css genannt haben, enthält: 

.element1 {
    font-weight: bold;
}

Das funktioniert, weil, wenn mehrere Regeln für den gleichen Selektor definiert die Regeln zusammengeführt werden. Mit dieser Technik würden Sie nicht die Klassenwerte für HTML-Elemente ändern müssen.

Syntax wie in http://lesscss.org/
Ich hoffe, dass Sie einige hilfreiche Mitarbeiter dort finden

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top