Was tun, wenn ein CSS-Stilkonflikt auftritt?

Lösung: 1. Verfeinern Sie den Selektor und schreiben Sie die Selektorbeschreibung genauer. 3. Ändern Sie die Reihenfolge im CSS-Stylesheet. 4. Erhöhen Sie bei Bedarf aktiv die Priorität " nach dem verwendeten Stil.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

1. Verfeinern Sie den Selektor.

Schreiben Sie die Beschreibung des Selektors genauer, indem Sie beispielsweise für das folgende Codefragment einen Combiner (Combinator) verwenden, wenn Sie Stile zu .apple hinzufügen möchten. Bei Mobiltelefonen hat die alleinige Verwendung von .apple unweigerlich Auswirkungen auf .apple in .fruit.

<div class="cellphones">
  <div class="apple"></div>
</div>
<div class="fruit">
  <div class="apple"></div>
</div>

Sie können die genauere Beschreibung von Descendant Combinator oder Child Combinator verwenden. Je präziser die Beschreibung, desto höher ist die Priorität, und Beschreibungen mit höherer Priorität haben Vorrang vor Beschreibungen mit niedrigerer Priorität.

/* 后代组合器：所有后代节点 */
.cellphones .apple {
	border: 1px solid black;
}

/* 更加精确的后代组合器 */
body .cellphones .apple {
  border: 1px solid blue;
}

/* 子代组合器：直接子节点 */
.cellphones > .apple {
  border: 1px solid red;
}

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

Detaillierte Prioritätsregeln finden Sie unter CSS-Priorität

2. Das erneute Schreiben des Selektornamens

ist im Wesentlichen ein Sonderfall der vorherigen Situation. Fügen Sie beispielsweise für .apple den folgenden Stil hinzu:

.cellphones > .apple.apple {
  border: 1px solid purple;
}
.cellphones > .apple {
  border: 1px solid red;
}

Irgendwann erscheint der Rand lila.

3. Ändern Sie die Reihenfolge im CSS-Stylesheet

Für Stile, die durch denselben Selektortyp angegeben werden, überschreiben die späteren Stile in der CSS-Datei die vorherigen Stile. Für das div-Element im folgenden Code ist das Browser-Rendering-Ergebnis beispielsweise rot:

<div class="redBorder" class="blackBorder"></div>

.blackBorder {
  border: 1px solid black;
}
.redBorder {
  border: 1px solid red;
}

Es ist zu beachten, dass .blackBorder zwar nach .redBorder in der HTML-Datei erscheint, die Priorität jedoch anhand der Positionsreihenfolge in beurteilt wird CSS-Dateien. Mit anderen Worten: Es wird nur die .redBorder verwendet, die sich später in der CSS-Datei befindet.

4. Erhöhen Sie die Priorität aktiv (nicht empfohlen)

Es gibt auch eine einfache und grobe Möglichkeit, die jedoch nicht empfohlen wird: Fügen Sie nach dem Stil, der verwendet werden muss, das Schlüsselwort !important hinzu, um die Stilpriorität zu erhöhen ein extrem hohes Niveau. Zum Beispiel:

<div class="redBorder" class="greenBorder"></div>

.greenBorder {
  border: 1px solid green !important;
}
.redBorder {
  border: 1px solid red;
}

Mit dem obigen Code erscheint der Rand grün.

Die Verwendung von !important ist eine sehr schlechte Angewohnheit, die die inhärenten Kaskadenregeln im Stylesheet bricht und das Debuggen sehr erschwert!

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas tun, wenn ein CSS-Stilkonflikt auftritt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!