CSS-Spezifität erklärt: So steuern Sie, welche Stile gewinnen

Haben Sie jemals Stunden damit verbracht, Ihr CSS zu optimieren, und sich gefragt, warum dieser eine hartnäckige Stil nicht zutrifft? Willkommen in der Welt der Spezifität.

Spezifität ist, wie Browser entscheiden, welche CSS-Regel angewendet werden soll, wenn mehrere Regeln auf dasselbe Element abzielen. Ohne es zu verstehen, können Ihre Stylesheets schnell zu einem Wirrwarr werden. Lassen Sie es uns aufschlüsseln.

Die Spezifitätshierarchie

1. Universal Selector: Der Nullpunkt-Anwärter

Der universelle Selektor (*) steht am Ende der Spezifitätskette mit 0 Punkten. Es ist wie eine pauschale Regel für alles, wird aber von fast allem anderen außer Kraft gesetzt.

Beispiel:

* {
  color: red;
}
h1 {
  color: blue;
}

Auch mit * { Farbe: rot; }, ein

wird blau sein, weil der Elementselektor gewinnt.

2. Elementauswahl: 1 Punkt der Spezifität

Elementselektoren (h1, p, div) sind stärker als universelle Selektoren und tragen 1 Punkt.

Beispiel:

h1 {
  color: green;
}

Diese Regel überschreibt einen universellen Selektor, der auf dasselbe Element abzielt.

3. Klassen-, Pseudoklassen- oder Attributselektor: 10 Punkte

Selektoren wie .button, :hover oder [type="text"] sind mit 10 Punkten spezifischer.

Beispiel:

.button {
  color: purple;
}

Dadurch werden sowohl Universal- als auch Elementselektoren überschrieben.

4. ID-Auswahl: 100 Punkte

IDs (#submitButton) sind mit 100 Punkten deutlich leistungsfähiger. Gehen Sie sparsam damit um, da sie die Verwaltung von Stilen erschweren können.

Beispiel:

#submitButton {
  background-color: yellow;
}

5. Inline-Styles: 1.000 Punkte – Das Schwergewicht

Inline-Stile übertrumpfen alles außer !important.

Beispiel:

<div>



<h4>
  
  
  6. The Almighty !important
</h4>

<p>Adding !important forces a rule to override others, even inline styles. But overusing it can lead to chaos in your CSS. It can be necessary when using third-party libraries to help override predefined styles.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.button {
  color: red !important;
}

Wenn die Spezifität stimmt, kommt es auf die Reihenfolge an

Wenn zwei Regeln die gleiche Spezifität haben, gewinnt diejenige, die später im Stylesheet steht.

Beispiel:

h1 {
  color: red;
}
h1 {
  color: green;
}

Hier

wird grün sein, da die zweite Regel später ist.

Zusammenfassung der Spezifitätspunkte

• Universal Selector (*): 0 Punkte
• Elementselektor (div, p): 1 Punkt
• Klasse, Pseudoklasse, Attributselektoren: 10 Punkte
• ID-Selektor (#id): 100 Punkte
• Inline-Stile: 1.000 Punkte
• !important: Überschreibt alles

Wenn Sie die Spezifität beherrschen, können Sie sauberes, wartbares CSS schreiben und sich so endloses Debuggen ersparen. Wenn sich Ihre Styles das nächste Mal nicht benehmen, wissen Sie genau, wo Sie suchen müssen.

Das obige ist der detaillierte Inhalt vonCSS-Spezifität erklärt: So steuern Sie, welche Stile gewinnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!