Wie ist die Prioritätsreihenfolge von CSS-Selektoren?

Wenn wir die Seite schreiben, frage ich mich, ob Sie ein solches Problem haben werden. Warum hat der von mir hinzugefügte Stil eindeutig das Element ausgewählt, das ich ihm geben möchte, aber sein Stil wird nicht wirksam? Welchen Stilsatz wird der Browser verwenden, wenn die definierten Attribute in Konflikt geraten? In diesem Kapitel lernen Sie die Prioritätsreihenfolge von CSS-Selektoren kennen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Priorisierung der Selektoren

　1. ! wichtig

Wenn Sie diesen Stil nach dem Attribut schreiben, wird der Stil des an einer beliebigen Stelle auf der Seite definierten Elements überschrieben.

　2. Inline-Stil, der im Stilattribut geschriebene Stil.

3. ID-Auswahl

4. Klassenauswahl

5. Tag-Auswahl

6. Wildcard-Auswahl

7. Browserbenutzerdefiniert Attribute und Vererbung

Die oben beschriebene Sortierreihenfolge ist die Priorität/Gewicht. Sie können es selbst ausprobieren, um die Größenordnung zu vergleichen.

2. Komplexe Selektorpriorität, Nachkommenselektorpriorität in verschiedenen Situationen.

Manchmal verwenden wir beim Schreiben von Stilen mehrere abgeleitete Stile. Was ist also die Prioritätssituation? Schauen wir uns ein paar Beispiele an.

1. Derjenige mit mehr ID hat eine höhere Priorität

#box .head span{
    color:blue;
}
.box .head span{
    color:red;
}<br data-filtered="filtered">//下面span标签的颜色是蓝色的
　　<div class="box" id="box">
　　　　<div class="head">
　　　　　　<span>我的颜色</span>
　　　　</div>
　　</div>

2. Die Anzahl der ID und der Klasse ist gleich, abhängig von der Anzahl der Elemente, je höher die Nummer, desto höher die Priorität .

//颜色应用的是第一个的样式，粉色<br data-filtered="filtered">#box .head p span{
　　color:deeppink;
}
#box .head span{
　　color:blue;
}
#box .head span{
　　color:red;
}
 
<div class="box" id="box">
　　<div class="head">
　　　　<p class="p"><span>我的颜色</span></p>
　　</div>
</div>

3. Die Prioritäten sind die gleichen und die späteren Stile überschreiben die vorherigen Stile, in keiner bestimmten Reihenfolge, nur der Selektortyp und die Nummer.

//蓝色，优先级相同，后面的覆盖前面的，id、class、元素的个数不分先后顺序
#box .head p span{
    color:red;
}
#box div .p span{
    color:blue;
}
 
<div class="box" id="box">
    <div class="head" id="head">
        <p class="p" id="p"><span>我的颜色</span></p>
    </div>
</div>

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