Detaillierte Einführung in das CSS-Prioritätswissen

Bevor wir über die CSS-Priorität sprechen, müssen wir verstehen, was CSS ist und wofür CSS verwendet wird. Einfach ausgedrückt ist CSS die Abkürzung für Cascading Style Sheets. Seine Spezifikationen stellen eine einzigartige Entwicklungsstufe in der Geschichte des Internets dar. Heutzutage dürfte es kaum jemanden geben, der im Bereich der Webseitenerstellung noch nichts von CSS gehört hat, da wir es beim Erstellen von Webseiten häufig verwenden müssen. Mit CSS können wir Dokumenten ein ansprechendes und leicht veränderbares Erscheinungsbild verleihen und so den Arbeitsaufwand der Webseiten-Ersteller verringern. Dies wiederum senkt die Kosten für die Erstellung und anschließende Wartung.

Tatsächlich ist es völlig überflüssig, jetzt darüber zu sprechen, was CSS ist und welche Funktionen es hat. Ich glaube, dass Freunde, die sich mit der Erstellung von Webseiten beschäftigen, bereits bis zu einem gewissen Grad damit in Kontakt gekommen sind. Kommen wir zurück zum heutigen Thema.

1. Was ist CSS-Priorität?

Die sogenannte CSS-Priorität bezeichnet die Reihenfolge, in der CSS-Styles im Browser analysiert werden.

2. CSS-Prioritätsregeln

Da Stile Prioritäten haben, gibt es eine Regel zur Bestimmung der Priorität, und diese „Regel“ steht im Mittelpunkt dieses Artikels.

Die Spezifität in einem Stylesheet beschreibt die relative Gewichtung verschiedener Regeln. Die Grundregeln sind:

1. Zählen Sie die Anzahl der ID-Attribute im Selektor.

2. Zählen Sie die Anzahl der CLASS-Attribute im Selektor.

3. Zählen Sie die Anzahl der HTML-Tag-Namen im Selektor.

Schreiben Sie abschließend die drei Zahlen in der richtigen Reihenfolge ohne Leerzeichen oder Kommas, um eine dreistellige Zahl zu erhalten (CSS 2.1 verwendet vier Ziffern). (Beachten Sie, dass Sie die Zahl in eine größere Zahl umwandeln müssen, die mit drei Ziffern endet.) Anhand der endgültigen Liste mit den Nummern, die den Selektoren entsprechen, lässt sich leicht ermitteln, welche Funktionen mit höheren Nummern Vorrang vor denen mit niedrigeren Nummern haben.

Zum Beispiel:

1. Addieren Sie für jeden ID-Selektor (#someid) 0,1,0,0.

2. Fügen Sie jedem Klassenselektor (.someclass), jedem Attributselektor (wie [attr=value] usw.) und jeder Pseudoklasse (wie :hover usw.) 0,0,1,0 hinzu.

3. Addieren Sie für jedes Element oder Pseudoelement (:firstchild) 0,0,0,1.

4. Andere Selektoren umfassen den globalen Selektor * plus 0,0,0,0. Dies entspricht dem Nicht-Hinzufügen, stellt jedoch auch eine Art Spezifität dar, die später erläutert wird.

3. Auswahlliste zur Merkmalsklassifizierung

Nachfolgend sehen Sie eine Liste von Selektoren, kategorisiert nach Merkmalen:

Wenn man sich nur die obige Tabelle ansieht, ist es schwer zu verstehen. Hier ist eine weitere Tabelle:

Aus dem Obigen können wir leicht erkennen, dass die Gewichtung der HTML-Tags 1, die Gewichtung von CLASS 10, die Gewichtung von ID 100 und die Gewichtung der Vererbung 0 ist (was später besprochen wird).

Nach diesen Regeln werden die Zahlenfolgen Stück für Stück addiert, um das endgültige Gewicht zu erhalten, und anschließend beim Vergleichen Stück für Stück von links nach rechts verglichen.

Das Prioritätsproblem ist eigentlich ein Konfliktlösungsproblem. Wenn dasselbe Element (Inhalt) von einem CSS-Selektor ausgewählt wird, müssen je nach Priorität unterschiedliche CSS-Regeln ausgewählt werden. Tatsächlich sind damit viele Probleme verbunden.

An dieser Stelle müssen wir über die Vererbung von CSS sprechen.

IV. CSS-Vererbung

4.1 Vererbte Ausdrücke

Vererbung ist ein Hauptmerkmal von CSS, das auf Vorfahren-Nachkommen-Beziehungen basiert. Vererbung ist ein Mechanismus, der es ermöglicht, Stile nicht nur auf ein bestimmtes Element, sondern auch auf seine Nachkommen anzuwenden. Beispielsweise wird ein im BODY definierter Farbwert auch auf den Text im Absatz angewendet.

Stildefinition:

Beispielcode:

Beispieleffekt:

Das Ergebnis der Anwendung dieses Codes ist: „Testen auf CSS-Vererbung“ ist rot und das Wort „Vererbung“ ist aufgrund der Anwendung von Tags fett gedruckt. Offensichtlich erbt dieser Text die durch den Textkörperstil {color:#f00;} definierte Farbe. Aus diesem Grund ist Vererbung Teil von CSS.

Die Gewichtung der CSS-Vererbung ist jedoch sehr gering, nämlich 0, also niedriger als die Gewichtung gewöhnlicher Elemente.

Nehmen wir den obigen Beispielcode als Beispiel: Fügen Sie der Stildefinition eine Zeile hinzu:

Beispieleffekt:

Ich habe festgestellt, dass ich nur einen Farbwert hinzufügen musste, um die geerbte Stilfarbe zu überschreiben. Daraus ist ersichtlich, dass jede explizit deklarierte Regel ihren geerbten Stil überschreiben kann.

4.2 Beschränkungen der Vererbung

Vererbung ist ein wichtiger Bestandteil von CSS und wir müssen nicht einmal darüber nachdenken, warum es so funktioniert, aber die CSS-Vererbung hat auch Einschränkungen.

Einige Eigenschaften können nicht vererbt werden, wie z. B. Rahmen, Ränder, Polsterung, Hintergrund usw.

Stildefinition:

Beispielcode:

Erwartete Ergebnisse:

Tatsächliche Wirkung:

Aus dem obigen Effekt können wir erkennen, dass die Grenze nicht vererbt werden kann. Das Gleiche gilt für einige andere Eigenschaften, die hier nicht einzeln aufgeführt sind.

V. Weitere Hinweise

1. Die Stilpriorität im Dokument beträgt 1,0,0,0 und ist daher immer höher als die externe Definition. Hier bezieht sich der Inline-Stil auf den Stil von <div style="color:red>blah</div>, während sich die externe Definition auf die durch die Tags <link> oder <style> definierten Regeln bezieht.

2. Regeln mit !important-Deklarationen haben Vorrang vor allen anderen.

3. Wenn !important-Deklarationen in Konflikt stehen, vergleichen Sie die Prioritäten.

4. Bei gleichen Prioritäten werden diese in der Reihenfolge ihres Auftretens im Quellcode ermittelt, wobei die späteren Prioritäten Vorrang haben.

5. Der durch Vererbung erhaltene Stil weist keine Spezifitätsberechnung auf und ist niedriger als bei allen anderen Regeln (z. B. den durch den globalen Selektor * definierten Regeln).

6. Bezüglich externer Stile, die über @import geladen werden, gilt: Da @import vor allen anderen Regeldefinitionen erscheinen muss (wenn nicht, sollte der Browser es ignorieren), ist es gemäß dem Prinzip „Später kommt zuerst“ im Allgemeinen im Nachteil, wenn ein Prioritätskonflikt auftritt.

Es sollte auch erwähnt werden, dass der IE @import möglicherweise an der falschen Position erkennt, aber unabhängig davon, wo sich @import befindet, wird davon ausgegangen, dass es vor allen anderen Regeldefinitionen steht, was zu Missverständnissen führen kann.

Die Prioritätsfrage scheint einfach zu sein, dahinter verbirgt sich jedoch ein äußerst komplexer Mechanismus, dem in der praktischen Anwendung mehr Aufmerksamkeit gewidmet werden muss.