Priorität der Stile im CSS-Stylesheet

Manchmal funktionieren beim Schreiben von CSS bestimmte Einschränkungen immer nicht, was das Problem der Abdeckung des CSS-Stils mit sich bringt, wie folgt

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0;
}

Schauen Sie sich einige Lehrmaterialien an (w3schools usw.). Es wird nur gesagt, dass die Reihenfolge von CSS „Stil auf dem Element“ > „Stilelement im Dateiheader“ > „externe Stildatei“ ist, es gibt jedoch keine detaillierte Erklärung, wie die Prioritäten mehrerer identischer Stile in der Stildatei sind angeordnet sind. Nach dem Testen und der weiteren Suche habe ich erfahren, dass die Prioritäten wie folgt angeordnet sind:

1. Je präziser die Elementauswahl des Stylesheets, desto höher ist die Priorität des Stils :

Stil angegeben durch ID-Selektor> Stil angegeben durch Elementtyp-Selektor

Im obigen Beispiel ist die Stilpriorität von #navigator größer als die Priorität von . current_block, mit der Zeit ist .current_block die neueste Ergänzung und funktioniert auch nicht.

2. Für Stile, die durch denselben Selektortyp angegeben werden, ist die Priorität umso höher, je später in der Stylesheet-Datei.

Hinweis: Hier ist die Stylesheet-Datei Je später im Element, desto höher ist die Priorität und nicht die Reihenfolge, in der die Elementklasse erscheint. Beispielsweise erscheint .class2 nach .class1 im Stylesheet:

.class1 {
    color: black;
}
.class2 {
    color: red;
}

Wenn ein Element die Klasse angibt, wird es mit class="class2 class1" angegeben, obwohl class1 im angegeben ist Element Rang hinter Klasse2, aber da Klasse1 in der Stylesheet-Datei vor Klasse2 steht, hat Klasse2 zu diesem Zeitpunkt immer noch eine höhere Priorität und das Farbattribut ist Rot und nicht Schwarz.

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

3. Wenn Sie möchten, dass die Priorität eines bestimmten Stils höher ist, können Sie mit !important Folgendes angeben:

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

Zu diesem Zeitpunkt verwendet die Klasse Schwarz statt rot.

Für die am Anfang aufgetretenen Probleme gibt es zwei Lösungen:

1 Nehmen Sie den Rahmen aus #navigator und fügen Sie ihn in einen Klassenblock ein, und .block wird vor .current_block platziert:

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
}
.block {
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0;
}

Sie müssen class="block" für das #navigator-Element angeben

2. Verwenden Sie !important:

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0 !important;
}

Weitere Artikel zur Stilpriorität in CSS-Stylesheets finden Sie auf der chinesischen PHP-Website!