Die CSS-Priorität der Webseite wird für Sie ausführlich erklärt

Bevor wir über die CSS-Priorität sprechen, müssen wir verstehen, was CSS ist und wofür CSS verwendet wird.

Lassen Sie uns zunächst eine kurze Erklärung zu CSS geben: CSS ist 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.

Zweitens: Wir können CSS verwenden, um dem Dokument ein ansprechendes und leicht veränderbares Erscheinungsbild zu verleihen und so den Arbeitsaufwand der Webseiten-Ersteller zu verringern. Dadurch sinken die Kosten für die Erstellung und die 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 nun 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ählt die Anzahl der ID-Attribute im Selektor.
2. Zählen Sie die Anzahl der CLASS-Attribute im Selektor.
3. Zählt die Anzahl der HTML-Tagnamen 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. Fügen Sie für jeden ID-Selektor (#someid) 0,1,0,0 hinzu.
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.

In die Webseite werden mehrere CSS-Style-Dateien geladen. Eine davon ist die Style-Datei aus der Ext-Bibliothek, die einige Styles für alle Tags definiert, wodurch die ursprüngliche Webseite nicht richtig angezeigt wird. Durch das Auffinden des entsprechenden Stils wird der richtige Stil wiederhergestellt. Fügen Sie dem Body-Tag den neuen Stil hinzu, es werden jedoch zwei Stile angezeigt und der Ext-Stil ist weiterhin gültig. Schließlich stellte ich fest, dass ich beim Festlegen des neuen Stils kein * hinzugefügt hatte, wodurch dieser nur für den Body-Tag, nicht aber für die untergeordneten Tags wirksam war. Das Folgende ist der modifizierte Stil