Wie überschreiben Sie die Eigenschaften einer CSS-Klasse mit einer anderen CSS-Klasse?

Es gibt verschiedene Möglichkeiten, Eigenschaften zu überschreiben. Vorausgesetzt, du hast

.left { background: blue }

z.B. Eine der folgenden Optionen würde es überschreiben:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

Die ersten beiden "gewinnen" durch Selektorspezifität; der dritte gewinnt mit !important ein stumpfes Instrument.

Sie können Ihre Stylesheets auch so organisieren, dass z. die Regel

.background-none { background: none; }

gewinnt einfach durch Ordnung, d. h. indem er after eine ansonsten ebenso "mächtige" Regel ist. Dies führt jedoch zu Einschränkungen und erfordert, dass Sie bei der Reorganisation von Stylesheets vorsichtig sind.

Dies sind alles Beispiele für die CSS Cascade , ein wichtiges, aber weithin missverstandenes Konzept. Es definiert die genauen Regeln zum Lösen von Konflikten zwischen Stylesheet-Regeln.

P.S. Ich habe left und background-none so verwendet, wie sie in der Frage verwendet wurden. Sie sind Beispiele für Klassennamen, die not verwendet werden sollten, da sie ein bestimmtes Rendering und keine strukturellen oder semantischen Rollen widerspiegeln.

Verwenden Sie einfach !important , um das Überschreiben zu erleichtern 

background:none !important;

Schauen Sie sich das an: Wenn-using-important-is-the-right-choice

Als Alternative zum Schlüsselwort important können Sie den Selektor genauer festlegen, beispielsweise

.left.background-none { background:none; }

(Hinweis: kein Leerzeichen zwischen den Klassennamen).

In diesem Fall gilt die Regel, wenn sowohl .left als auch .background-none im Klassenattribut aufgeführt sind (unabhängig von der Reihenfolge oder der Nähe).

Sie sollten es überschreiben, indem Sie Spezifität Ihres Stylings erhöhen. Es gibt verschiedene Möglichkeiten, die Spezifität zu erhöhen. Die Verwendung von !important, der die Spezifität beeinflusst, ist eine schlechte Praxis, da dadurch die natürliche Kaskadierung in Ihrem Stylesheet unterbrochen wird. 

Das folgende Diagramm aus css-tricks.com hilft Ihnen dabei, die richtige Spezifität für Ihr Element basierend auf einer Punktestruktur zu erstellen. Welche Besonderheit höhere Punkte hat, gewinnt. Klingt nach einem Spiel - oder?

Berechnen Sie Beispielberechnungen hier auf css-tricks.com . Dies hilft Ihnen, das Konzept sehr gut zu verstehen, und es dauert nur 2 Minuten. 

Wenn Sie dann verschiedene Besonderheiten selbst erstellen und/oder vergleichen möchten, probieren Sie diesen Spezifitätsrechner aus: https://specificity.keegan.st/ oder Sie können einfach traditionellen Papier/Bleistift verwenden. 

Weitere Informationen finden Sie unter MDN Web Docs .

Alles Gute für !important.

Wenn Sie die bakground-none-Klasse nach den anderen Klassen auflisten, überschreiben ihre Eigenschaften die bereits festgelegten. Es ist nicht erforderlich, !important hier zu verwenden.

Zum Beispiel:

.red { background-color: red; }
.background-none { background: none; }

und

<a class="red background-none" href="#carousel">...</a>

Der Link hat keinen roten Hintergrund. Bitte beachten Sie, dass dies nur Eigenschaften überschreibt, deren Selector weniger oder gleich spezifisch ist.

LIFO ist die Art und Weise, wie Browser CSS-Eigenschaften analysiert. Wenn Sie Sass verwenden, deklarieren Sie eine Variable, die als bezeichnet wird 

"$ header-background: red;"

verwenden Sie es, anstatt Werte wie Rot oder Blau direkt zuzuweisen. Wenn Sie überschreiben möchten, weisen Sie den Wert einfach neu zu 

"$ header-background: blue"

dann

hintergrundfarbe: $ header-background;

es sollte glatt überschreiben. Die Verwendung von "! Important" ist nicht immer die richtige Wahl ... Es ist nur ein Hotfix