Detaillierte Einführung in die Selektorprioritätsreihenfolge in CSS

Was ist das Besondere?

Beim Anwenden von CSS-Stilen auf ein HTML-Element gibt es oft viele Möglichkeiten, das Element zu finden, wie zum Beispiel:

<p id="container" class="wrap_sty">   
    <p class="pra">这是一个段落</p>   
</p>   
<style>   
    #container p { color:red }   
    p p { color:green }   
    p { color:yellow }    
</style>

Es ist ersichtlich, dass es viele Möglichkeiten gibt, auf ein HTML-Element zu reagieren, weit mehr als diese. Wenn also viele gleiche Stile auf ein Element angewendet werden, welcher Stil wird am Ende angezeigt? CSS verwendet eine Methode namens Spezifität, um mehrere Selektoren zu priorisieren.

CSS-Spezifität
Die Spezifität von Selektoren ist in 4 Ebenen unterteilt, a b c d, von links nach rechts, wobei die weiter links liegende Ebene Vorrang hat, wenn mehrere Selektorregeln +1 vorhanden sind für Selektoren des gleichen Typs.
Wenn es sich um einen internen HTML-Stil handelt, hat die Spezifität Priorität, a=1
Die Spezifität des ID-Selektors ist b, und der
Klassenselektor, der Pseudoklassenselektor und der Attributselektor sind c
Der Label-Selektor und der Pseudoelement-Selektor sind d
Lassen Sie uns zunächst über einige Selektortypen sprechen:
1.id-Selektor

#myid { ... }

2. Klassenauswahl

.myclass { ... }

3. Tag-Auswahl

p { ... }

4. Attributselektor

[title="mytitle"] { ... }

Da die meisten Dokumente wie W3CSCHOOL dies möglicherweise nicht im Detail erklären, denken viele Leute vielleicht, dass der Attributselektor so ist [title="mytitle"] oder #id[title="mytitle"] usw. ist streng genommen kein reiner Attributselektor, sondern eine Kombination aus ID-Selektor und Tag-Selektor usw. bestehen aus der Attributauswahl.
5. Pseudoklassenselektor

p:hover { ... }

Gemeinsame Pseudoklassenselektoren sind:
Link-Pseudoklasse, :link, :visited , für Ankerelemente.
Dynamische Pseudoklassen :hover, :focus, :active für jede Auswahl.
6. Pseudoelementselektor

p::after { ... }   
p::before { ... }

Pseudoelement und Pseudoklasse sind völlig unterschiedliche Konzepte. Sie werden Pseudoelemente genannt kann zwar ein virtuelles HTML-Element generieren, das Pseudoelement kann jedoch nicht vom DOM abgerufen werden.
Es gibt viele Anwendungen von Pseudoelementen, die häufigsten sind::nach dem Löschen von Floats:

<ul>   
    <li>A</li>   
    <li>B</li>   
</ul>   
<style>   
    li { float:left }   
    ul::after { content: ""; display: block; clear: both }   
</style>

CSS-Spezifitätsbeispiele
Die Im Folgenden finden Sie einige Beispiele für die Spezifität von CSS-Selektoren:

选择器	特殊性	以10为基数的特殊性
style="color: red"	1, 0, 0, 0	1000
#id {}	0, 1, 0, 0	100
#id #aid	0, 2, 0, 0	200
.sty {}	0, 0, 1, 0	10
.sty p[title=""] {}	0, 0, 2, 0	20
p:hover {}	0, 0, 1, 0	10
p {}	0, 0, 0, 1	1
ul::after {}	0, 0, 0, 1	1
p p {}	0, 0, 0, 2	2

Wenn zwei Regeln dieselbe Spezifität haben, überschreibt die später definierte die zuerst definierte.

CSS-Wichtigkeit
Es gibt noch eine weitere Sache in CSS, die die Spezifität ignorieren kann, und zwar !important. CSS-Eigenschaften, die dieses Tag verwenden, haben immer Vorrang.

#id { color: red }   
.class { color: yellow !important }

Der zweite Stil hat Vorrang vor dem ersten, auch wenn der ID-Selektor spezifischer ist als der Klassenselektor.
Wenn beide Eigenschaften !important haben, bestimmt die Spezifität die Priorität.

#id { color: red ！important }   
.class { color: yellow !important }

Das Ergebnis ist, dass der erste Stil Vorrang vor dem zweiten hat.
IE6s Unterstützung für !important ist nicht vollständig. Wenn in IE6 das Attribut !important zuerst in einem Selektor definiert wird und dann dasselbe Attribut ohne !important später definiert wird, ist !important ungültig.

p {   
  color: yellow !important;     
  color: red;   
}

In IE6 kann es nicht vergilbt werden, also sehen wir uns etwas Blut an!
IE6/7 kann auch einige Zutaten nach !important hinzufügen, ohne den Geschmack zu verlieren, aber es wird empfohlen, nicht so langweilig zu sein!

div {   
  color: yellow !important you are dead;   /* IE6/7依然有效 */  
}

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Selektorprioritätsreihenfolge in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!