So legen Sie die Priorität in CSS fest (Gewichtungsregeln)

1. Was ist die CSS-Prioritätseinstellung?

CSS (Cascading Style Sheets), kaskadierende Stylesheets, werden zum Hinzufügen von Stilen zu Webseiten verwendet. Wenn jedoch mehrere CSS-Regeln dasselbe Element formatieren, liegt ein Problem mit der Stilpriorität vor. Die CSS-Prioritätseinstellung ist die Lösung für dieses Problem.

In CSS hat jede Regel eine bestimmte Gewichtung. Regeln mit höherer Gewichtung überschreiben Regeln mit niedrigerer Gewichtung, um Stilpriorität zu erreichen. Die Priorität der CSS-Einstellung hängt von vier Faktoren ab: der Reihenfolge von Selektoren, Klassen, IDs und Stilen.

2. Gewichtsregeln zum Festlegen von Prioritäten in CSS

1. Gewicht von Selektoren

In CSS werden Selektoren in Elementselektoren und Klassenselektoren unterteilt und ID-Auswahl. Im Falle eines Stilkonflikts erhöht sich die Gewichtung des Selektors in der folgenden Reihenfolge:

Element-Selektor (1)
Klassen-Selektor (10)
ID-Selektor (100) #🎜 🎜#

2. Die Gewichtung von Klassen und Attributen

Die Gewichtung von Klassen und Attributen ist dieselbe wie die Gewichtung von Selektoren, sie bestimmen auch die Priorität gemäß dem oben Gesagten zunehmende Regeln.

3. Die Reihenfolge der Stile

Wenn Stilkonflikte auftreten, ersetzen die später definierten Stile die zuvor definierten Stile. Wenn daher Stile mit derselben Gewichtung definiert sind, überschreibt der zuletzt definierte Stil den vorherigen.

4.!important-Schlüsselwort

In CSS ermöglicht das !important-Schlüsselwort, dass die Stildefinition unabhängig von Selektor, Klasse, ID oder Reihenfolge die höchste Gewichtung hat Definitionen werden überschrieben. Diese Methode sollte jedoch möglichst vermieden werden, da sie die Vererbung und Lesbarkeit des Stils zerstört.

3. Beispiele für die CSS-Einstellungspriorität

Um die CSS-Einstellungspriorität besser zu verstehen, finden Sie im Folgenden einige Beispiele:

1 Die folgenden Stilregeln werden zuerst auf div-Elemente angewendet:

div{

font-size: 22px;
color: red;

}

/#🎜 🎜#ElementSelector

/

p{

font-size: 18px;
color: blue;

}/
ElementSelector/

.container div {

font-size: 14px;
color: green;

}/
Class Selector/

.class1{

font-size: 24px;
color: yellow;

}/
ID Selector/

#🎜 🎜#id1{

font-size: 28px;
color: purple;

}2. Die später definierten Stile haben hohe Priorität# 🎜🎜#

In den folgenden Stilregeln hat die später definierte Farbe höhere Priorität:

p{

color: red;

}

p{#🎜🎜 #

color: blue;

}

3.! wichtig hat die höchste Priorität

Unter den folgenden Stilregeln hat Farbe: Gelb die höchste Priorität und wird zuerst angewendet:

p{

color: red!important;
font-size: 18px;
color: blue;

}

p{

color: yellow;

}

4. Zusammenfassung

CSS-Einstellungspriorität wurde eingeführt, um das Problem zu lösen von Stilkonflikten. Im Falle eines Stilkonflikts wirkt sich die Reihenfolge der Selektoren, Klassen, IDs und Stile auf die Priorität aus. Das Verständnis der Regeln zum Festlegen der Priorität in CSS kann Stilprobleme besser lösen und die Entwicklungseffizienz verbessern.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Priorität in CSS fest (Gewichtungsregeln). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!