Wie kann ich eine widersprüchliche CSS-Regel aus einem externen Stylesheet überschreiben, wenn ich Inline-Stile verwende?

CSS-Vorrang: Spezifität verstehen

In diesem Szenario wird der Inline-Stil padding-left: 10px, der auf Tabellenzellen in der rechten Spalten-ID angewendet wird, durch eine widersprüchliche Regel überschrieben aus einem externen Stylesheet. Das referenzierte Stylesheet enthält eine Regel, die den Rand und den Abstand für alle Elemente innerhalb der rightColumn-Klasse auf 0 setzt.

Das Konzept der CSS-Spezifität

Um zu bestimmen, welche CSS-Regel Vorrang hat, wird ein Konzept namens Spezifität verwendet kommt ins Spiel. Spezifität ist ein Maß dafür, wie spezifisch der Selektor einer CSS-Regel ist. Je spezifischer ein Selektor, desto höher ist seine Spezifität.

Berechnung der Spezifität

CSS 2.1 definiert die folgenden Regeln zur Berechnung der Spezifität:

• Zähler 1, wenn die Deklaration lautet von einem Stilattribut (Inline-Styling) und 0, wenn es nicht von einem Stilattribut stammt.
• Zählt die Anzahl der ID-Attribute im Selektor.
• Zählt die Anzahl anderer Attribute und Pseudoklassen im Selektor.
• Zählt die Anzahl der Elementnamen und Pseudoelemente im Selektor.

Diese vier Werte werden in der Form a-b-c-d verkettet, wobei a der Wert aus dem ist erste Regel, b aus der zweiten Regel und so weiter. Je höher der numerische Wert, desto höher die Spezifität.

Spezifität auf den gegebenen Fall anwenden

In diesem Fall hat der Inline-Stil eine Spezifität von 0001 (keine ID-Attribute, keine anderen Attribute oder Pseudoklassen, ein Elementname). Die widersprüchliche Regel aus dem externen Stylesheet hat eine Spezifität von 0010 (keine ID-Attribute, ein anderes Attribut oder eine Pseudoklasse, keine Elementnamen).

Da 0010 höher als 0001 ist, wird die Regel aus dem externen Stylesheet übernommen Vorrang und überschreibt den Inline-Stil.

Zwei Lösungen zur Überwindung von Spezifitätsproblemen

Um die widersprüchliche Regel außer Kraft zu setzen, gibt es zwei Hauptoptionen:

1. Verwenden !important: Das Hinzufügen von !important zum Inline-Stil würde ihn wichtiger machen und die widersprüchliche Regel außer Kraft setzen. Dies sollte jedoch sparsam verwendet werden, da es zu Verwirrung führen kann.
2. Verwenden Sie einen Selektor mit höherer Spezifität: Ändern Sie den Inline-Stil, indem Sie den betreffenden Tabellenzellen eine Klasse oder ID hinzufügen. Dadurch wird eine neue Regel mit einer höheren Spezifität als die widersprüchliche Regel aus dem externen Stylesheet erstellt.

Das obige ist der detaillierte Inhalt vonWie kann ich eine widersprüchliche CSS-Regel aus einem externen Stylesheet überschreiben, wenn ich Inline-Stile verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!