CSS-Rangfolge: Warum Inline-Stile überschrieben werden

In CSS werden Stile auf Elemente basierend auf der Rangfolge ihrer Regeln angewendet. Wenn mehrere Regeln auf dasselbe Element abzielen, wird diejenige mit der höchsten Priorität wirksam.

Im bereitgestellten Beispiel haben Sie einen Inline-Stil, der padding-left: 10px für td-Elemente in einer Tabelle mit der rechten Spalte festlegt AUSWEIS. Allerdings setzt ein Stil aus einem referenzierten Stylesheet den Rand und den Abstand für alle Elemente innerhalb der .rightColumn-Klasse auf 0. Das Problem besteht darin, dass die Stile aus dem referenzierten Stylesheet eine höhere Priorität haben, was dazu führt, dass die Inline-Stile überschrieben werden.

Berechnung der Spezifität

Die CSS-Priorität wird durch die Spezifität von bestimmt Regeln. Die Spezifität wird anhand der folgenden Kriterien berechnet:

1. Inline-Stildeklarationen tragen 1 Punkt zur Spezifität bei (a = 1).
2. Jede ID im Selektor trägt 10 Punkte bei (b = n ).
3. Jede Klasse oder Pseudoklasse im Selektor trägt 1 Punkt bei (c = n).
4. Jedes Element oder Pseudoelement im Selektor trägt 1 Punkt bei (d = n).

Zum Beispiel hat eine Regel mit dem Selektor .rightColumn * eine Spezifität von 0010 (a = 0, b = 0, c = 1, d = 0), während eine Regel mit dem Selektor td hat eine Spezifität von 0001 (a = 0, b = 0, c = 0, d = 1). Da 0010 größer als 0001 ist, hat die Regel aus dem referenzierten Stylesheet höhere Priorität.

Problem lösen

Um dieses Problem zu beheben und die Inline-Stile anzuwenden, müssen Sie Folgendes tun zwei Optionen:

1. Verwenden Sie !important: Sie können !important zum Inline-Stil hinzufügen, um dessen höhere Wichtigkeit zu erzwingen. Dieser Ansatz kann jedoch schwierig beizubehalten sein und sollte nach Möglichkeit vermieden werden.
2. Regelspezifität erhöhen: Sie können dem Inline-Stil einen spezifischeren Selektor hinzufügen, um seine Spezifität zu erhöhen. Beispielsweise könnten Sie den Tabellenzellen einen Klassennamen hinzufügen und sie mit einem Selektor wie .rightColumn .myUnpaddedTable formatieren. Auf diese Weise wird die Spezifität des Inline-Stils zu 0011, was höher ist als die Spezifität der Regel aus dem referenzierten Stylesheet (0010).