In einem Stylesheet habe ich Folgendes:
%Vor%Beachten Sie, wie es auf dem Text auf der rechten Seite dieser Seite nicht funktioniert:
Sie können den Text untersuchen und feststellen, dass der Stil angewendet wurde, aber dann außer Kraft gesetzt werden. Wie ist das möglich?
Ich dachte, wichtig ignoriert CSS-Spezifität und fungiert als Richtlinie, um immer diesen Stil zu verwenden. Ich habe dieses Verhalten noch nie zuvor gesehen.
Hinweis:
Lassen Sie sich nicht von dem weißen Text um die Achse des Graphen täuschen, das ist ein Element text svg und wurde mit fill: white !important gefärbt.
Außerdem bin ich mir der korrekten Verwendung von! wichtig bewusst. Also bitte keine Kommentare oder Antworten sagen "Sie sollten nie verwenden! Wichtig". Das ist nicht die Frage:)
Dies hat nichts mit CSS-Spezifität oder !important zu tun. Sie haben eine Regel in main.css, die besagt:
Der Selektor zielt direkt auf die .label -Elemente und gibt ihnen eine Farbe, die verhindert, dass sie die Farbe vom Körper oder einem anderen Vorfahren erben. Die !important -Eigenschaft gilt nur für das Element, auf das es ausgerichtet ist. Andere Elemente erzwingen diese Eigenschaft nicht. Mit anderen Worten, eine angegebene Regel hat immer Vorrang vor einer geerbten Regel, auch wenn diese geerbte Regel !important ist.
Siehe die Spezifikation:
Benutzeragenten müssen zuerst jeder Eigenschaft auf der Grundlage der folgenden Mechanismen (in der Reihenfolge ihres Vorrangs) einen bestimmten Wert zuweisen:
- Wenn die Kaskade einen Wert ergibt, verwenden Sie ihn.
- Andernfalls, wenn die Eigenschaft geerbt wird und das Element nicht das Stammverzeichnis der Dokumentstruktur ist, verwenden Sie den berechneten Wert des übergeordneten Elements.
- Ansonsten verwenden Sie den Anfangswert der Eigenschaft. Der Anfangswert jeder Eigenschaft wird in der Definition der Eigenschaft angegeben.
Sie haben eine spezifischere Regel, die in Zeile 94 in main.css Vorrang hat:
%Vor% Ändere das in white und es ist gut zu gehen.
In Bezug auf das wichtige hat es Vorrang vor anderen Verweisen auf body , aber nicht auf #legend label, das ein spezifischerer und anwendbarerer Selektor ist. Hier ist ein anständiger Artikel über Spezifität in CSS: Ссылка
Tags und Links css