Interpretieren Sie die CSS-Priorität für Sie

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

Lassen Sie uns zunächst eine kurze Erklärung von CSS geben: CSS ist die Abkürzung für Cascading Style Sheets. Seine Spezifikationen stellen einen einzigartigen Entwicklungsstand in der Geschichte des Internets dar. Heutzutage dürfte es unter Freunden, die sich mit der Erstellung von Webseiten befassen, nur wenige geben, die noch nichts von CSS gehört haben, da wir es bei der Erstellung von Webseiten häufig verwenden müssen.

Zweitens: Wir können über CSS ein reichhaltiges und leicht zu änderndes Erscheinungsbild für das Dokument festlegen, um die Arbeitsbelastung der Webseitenersteller zu verringern und dadurch die Produktions- und Nachwartungskosten zu senken.

Tatsächlich ist es völlig überflüssig, darüber zu sprechen, was CSS ist und welche Funktionen es hat. Ich glaube, dass Freunde, die sich mit der Erstellung von Webseiten befassen, bereits mehr oder weniger damit in Berührung gekommen sind.

Kommen wir näher zum heutigen Thema:

1. Was ist CSS-Priorität?

Die sogenannte CSS-Priorität bezieht sich auf die Reihenfolge, in der CSS-Stile im Browser analysiert werden.

2. CSS-Prioritätsregeln

Da Stile Vorrang haben, wird es eine Regel zur Vereinbarung dieser Priorität geben, und diese „Regel“ steht im Mittelpunkt dieses Artikels.

Spezifität in einem Stylesheet beschreibt das relative Gewicht verschiedener Regeln. Seine 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 hinzuzufügen, um eine dreistellige Zahl zu erhalten (css2.1 verwendet 4 Ziffern). (Beachten Sie, dass Sie die Zahl in eine größere Zahl mit drei Ziffern umwandeln müssen.) Anhand der endgültigen Liste der dem Selektor entsprechenden Zahlen lässt sich leicht feststellen, welche Merkmale der höheren Zahl diejenigen der niedrigeren Zahl überschreiben.

Zum Beispiel:

1. Fügen Sie für jeden ID-Selektor (#someid) 0,1,0,0 hinzu.
2. Fügen Sie 0,0,1,0 zu jedem Klassenselektor (.someclass), jedem Attributselektor (Formular wie [attr=value] usw.) und jeder Pseudoklasse (Formular: Hover usw.) hinzu.
3. Fügen Sie für jedes Element oder Pseudoelement (:firstchild) usw. 0,0,0,1 hinzu.
4. Zu den weiteren Selektoren gehört der globale Selektor * plus 0,0,0,0. Dies ist gleichbedeutend damit, es nicht hinzuzufügen, aber es handelt sich auch um eine Besonderheit, die später erläutert wird.

3. Auswahlliste für die Merkmalsklassifizierung

Hier ist eine Liste der Selektoren, sortiert nach Attribut:

Allein anhand der obigen Tabelle scheint es schwer zu verstehen. Hier ist eine weitere Tabelle:

Aus dem Obigen ist leicht ersichtlich, dass die Gewichtung des HTML-Tags 1, die Gewichtung der Klasse 10, die Gewichtung der ID 100 und die geerbte Gewichtung 0 beträgt (wird später besprochen).

Addieren Sie die Zahlenfolgen Stück für Stück gemäß diesen Regeln, um das endgültige Gewicht zu erhalten, und vergleichen Sie sie dann beim Vergleichen und Auswählen Stück für Stück von links nach rechts.

Das Prioritätsproblem ist eigentlich ein Konfliktlösungsproblem. Wenn dasselbe Element (Inhalt) vom CSS-Selektor ausgewählt wird, müssen je nach Priorität unterschiedliche CSS-Regeln ausgewählt werden.

Allerdings müssen wir über die Vererbung von CSS sprechen.