Mehrere Möglichkeiten zur Lösung von CSS-Stilkonflikten (Zusammenfassung)

1. Verfeinern Sie den Selektor

Durch die Verwendung von Kombinatoren kann die Beschreibung des Selektors präziser geschrieben werden (siehe CSS-Selektoren – MDN). Wenn Sie beispielsweise im folgenden Codeausschnitt Stile zu .apple in .cellphones hinzufügen möchten, wirkt sich die Verwendung von nur .apple zwangsläufig auch auf .apple in .fruit aus.

<div Klasse="Handys">
  <div Klasse="Apfel"></div>
</div>
<div Klasse="Obst">
  <div Klasse="Apfel"></div>
</div>

Eine genauere Beschreibung könnte Descendant Combinator oder Child Combinator sein. Je genauer die Beschreibung, desto höher die Priorität. Eine Beschreibung mit höherer Priorität überschreibt eine Beschreibung mit niedrigerer Priorität.

/* Nachkommenkombinierer: alle Nachkommenknoten*/
.Handys .Apple {
 Rand: 1px tief schwarz;
}

/* Präziserer Nachkommenkombinator */
Körper .Handys .Apple {
  Rand: 1px durchgehend blau;
}

/* Child Combiner: direkte untergeordnete Knoten */
.Handys > .Apple {
  Rand: 1px durchgehend rot;
}

Wenn Sie alle oben genannten Stile der Reihe nach zu .apple hinzufügen, wird der Rand schließlich blau angezeigt.

Detaillierte Prioritätsregeln finden Sie unter CSS Priority

2. Schreiben Sie den Selektornamen erneut

Im Wesentlichen ein Sonderfall des vorherigen Falls. Fügen Sie beispielsweise für .apple den folgenden Stil hinzu:

.Handys > .Apple.Apple {
  Rand: 1px durchgehend lila;
}
.Handys > .Apple {
  Rand: 1px durchgehend rot;
}

Schließlich erscheint der Rand violett.

3. Reihenfolge im CSS-Stylesheet ändern

Bei Stilen, die durch denselben Typselektor angegeben werden, überschreiben die Stile, die später in der CSS-Datei vorkommen, die früheren Stile.

Beispielsweise wird für das Div-Element im folgenden Code das Browser-Rendering-Ergebnis rot sein:

<div Klasse="roterRahmen" Klasse="schwarzerRahmen"></div>

.schwarzer Rand {
  Rand: 1px tief schwarz;
}
.redBorder {
  Rand: 1px durchgehend rot;
}

Es ist wichtig zu beachten, dass, obwohl .blackBorder in der HTML-Datei nach .redBorder erscheint, die Priorität anhand ihrer Reihenfolge in der CSS-Datei bestimmt wird. Das heißt, es wird nur die später in der CSS-Datei enthaltene .redBorder-Erweiterung verwendet.

4. Priorität aktiv erhöhen (nicht empfohlen)

Es gibt auch eine einfache und grobe Methode, die jedoch nicht empfohlen wird. Dabei wird nach dem Stil, den Sie verwenden möchten, das Schlüsselwort !important hinzugefügt, um die Stilpriorität auf ein sehr hohes Niveau zu heben. Zum Beispiel:

<div Klasse="roterRahmen" Klasse="grünerRahmen"></div>

.grüneBorder {
  Rand: 1px durchgehend grün !wichtig;
}
.redBorder {
  Rand: 1px durchgehend rot;
}

Für den obigen Code wird der Rand grün angezeigt.

Die Verwendung von !important ist eine sehr schlechte Angewohnheit, die die in den Stylesheets enthaltenen kaskadierenden Regeln verletzt und das Debuggen sehr schwierig macht!

Quellen:
Priorität – MDN
So lösen Sie CSS-Stilkonflikte - Magic Time Machine

Damit ist dieser Artikel über verschiedene Möglichkeiten zur Lösung von CSS-Stilkonflikten abgeschlossen (Zusammenfassung). Weitere relevante CSS-Stilkonflikte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!