Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Was tun, wenn ein CSS-Stilkonflikt auftritt?

醉折花枝作酒筹
Freigeben: 2023-01-07 11:43:25
Original
4518 Leute haben es durchsucht

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.

Was tun, wenn ein CSS-Stilkonflikt auftritt?

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren
.blackBorder {
  border: 1px solid black;
}
.redBorder {
  border: 1px solid red;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren
.greenBorder {
  border: 1px solid green !important;
}
.redBorder {
  border: 1px solid red;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage