Wie ist die Prioritätsreihenfolge der CSS-Selektoren? Einführung in die grundlegende Auswahlpriorität von CSS

Es gibt viele Arten von Selektoren in CSS, daher wird das Konzept der Priorität natürlich auftauchen. Wie ist also die Prioritätsreihenfolge von CSS-Selektoren? Dieser Artikel führt Sie in die Prioritätsreihenfolge von CSS-Selektoren ein. Kommen wir ohne weitere Umschweife direkt zum Haupttext.

Bevor wir uns die Prioritätsreihenfolge von CSS-Selektoren ansehen, sprechen wir kurz über Was sind die grundlegenden CSS-Selektoren?

1. Tag-Selektor (z. B.: body, div, p, ul, li)

2.

3. Klassenselektor (z. B. id="name",id="name_txt")

4 Selektor für untergeordnete Elemente (z. B.: div>p, mit Größer-als-Zeichen) Klasse eines Elements, 4 verschiedene Zustände: Link, Besucht, Aktiv, Hover )

Nachdem wir uns die grundlegenden CSS-Selektortypen angesehen haben, werfen wir einen Blick auf das Konzept der

CSS-Priorität.

Wenn zwei Regeln für dasselbe HTML-Element gelten und die definierten Attribute in Konflikt stehen, hat der Wert, der verwendet werden soll, und der Wert, der verwendet wird, eine höhere Priorität.

Werfen wir einen Blick auf den Algorithmus der CSS-Selektorpriorität:

Jede Regel entspricht einer anfänglichen „vierstelligen Zahl“: 0, 0, 0, 0 Wenn es sich um einen Inline-Selektor handelt, fügen Sie 1, 0, 0, 0 hinzu.Wenn es sich um einen ID-Selektor handelt, fügen Sie 0, 1, 0, 0 hinzu.

Wenn es sich um einen Klassenselektor/Pseudoklassenselektor handelt , addiere jeweils 0, 0, 1, 0

Wenn es sich um einen Elementselektor handelt, addiere jeweils 0, 0, 0, 1
Algorithmus: Addiere die Zahlen, die den Selektoren in jeder Regel entsprechen, um die „vier“ zu erhalten -stellige Zahl“, von links nach rechts verglichen, desto größer ist die Priorität. ​

Nachdem wir den obigen Inhalt gelesen haben, werfen wir einen Blick auf die spezifische Reihenfolge der
CSS-Selektorpriorität.

Die CSS-Selektor-Prioritätsreihenfolge von der höchsten zur niedrigsten ist:

1.id-Selektor (#myid) 2 (.myclassname)

3. Tag-Selektor (div, h1, p)

4. Untergeordneter Selektor (ul < li)

5. Nachkommen-Selektor (li a )

6. Pseudoklassenauswahl (a:hover, li:nth-child)

Abschließend muss noch Folgendes beachtet werden:

!wichtig Die Priorität ist die höchste, aber wenn ein Konflikt auftritt, müssen die „vier Ziffern“ verglichen werden.

Wenn die Prioritäten gleich sind, wird das nächstgelegene Prinzip übernommen und der letzte Stil ausgewählt am niedrigsten.

Das Obige ist der gesamte Inhalt dieses Artikels. Natürlich gibt es mehr als die oben genannten sechs Selektoren zu CSS-Selektoren. Weitere Informationen zu CSS-Selektoren finden Sie im

CSS-Benutzerhandbuch
.

Das obige ist der detaillierte Inhalt vonWie ist die Prioritätsreihenfolge der CSS-Selektoren? Einführung in die grundlegende Auswahlpriorität von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!