So überschreiben Sie die Eigenschaften einer CSS-Klasse mithilfe einer anderen CSS-Klasse

Ich bin ziemlich neu in CSS3 und möchte Folgendes tun können:

Wenn ich einem Element eine Klasse hinzufüge, werden die Eigenschaften einer anderen Klasse überschrieben, die in diesem bestimmten Element verwendet wird.

Nehmen wir an, ich habe

<a class="left carousel-control" href="#carousel" data-slide="prev">

Ich möchte in der Lage sein, eine Klasse mit dem Namen hinzuzufügen bakground-none, die den Standardhintergrund in der Klasse überschreibt left.

Vielen Dank!

Es gibt verschiedene Möglichkeiten, wie Eigenschaften überschrieben werden können. Vorausgesetzt, Sie haben

.left { background: blue }

zB würde eine der folgenden Optionen es überschreiben:

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

Die ersten beiden "gewinnen" nach Selektorspezifität; der dritte gewinnt mit !importanteinem stumpfen Instrument.

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

.background-none { background: none; }

gewinnt einfach durch Ordnung, dh , indem sie nach einer ansonsten gleich „powerful“ -Regel. Dies führt jedoch zu Einschränkungen und erfordert, dass Sie bei der Neuorganisation von Stylesheets vorsichtig sind.

Dies sind alles Beispiele für die CSS-Kaskade , ein entscheidendes, aber weithin missverstandenes Konzept. Es definiert die genauen Regeln für die Lösung von Konflikten zwischen Stylesheet-Regeln.

PS Ich habe verwendet leftund background-nonewie sie in der Frage verwendet wurden. Sie sind Beispiele für Klassennamen, die nicht verwendet werden sollten, da sie bestimmte Renderings und keine strukturellen oder semantischen Rollen widerspiegeln.

Verwenden !importantSie es einfach, um zu überschreiben

background:none !important;

Obwohl es sich um eine schlechte Praxis handelt, !importantdie für Dienstprogrammklassen nützlich sein kann, müssen Sie sie nur verantwortungsbewusst verwenden. Überprüfen Sie Folgendes: Wenn die Verwendung von wichtig die richtige Wahl ist

Alternativ zum importantSchlüsselwort können Sie den Selektor spezifischer gestalten, z. B.:

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

(Hinweis: kein Leerzeichen zwischen den Klassennamen).

In diesem Fall gilt die Regel, wenn beide .leftund .background-noneim Klassenattribut aufgeführt sind (unabhängig von der Reihenfolge oder Nähe).

Sie sollten überschreiben, indem Sie die Spezifität Ihres Stils erhöhen . Es gibt verschiedene Möglichkeiten, die Spezifität zu erhöhen. Die Verwendung der !importantEffektspezifität ist eine schlechte Praxis, da sie die natürliche Kaskadierung in Ihrem Stylesheet unterbricht.

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

Beispielberechnungen zur Kasse hier auf css-tricks.com . Dies wird Ihnen helfen, das Konzept sehr gut zu verstehen und es dauert nur 2 Minuten.

Wenn Sie dann verschiedene Spezifitäten selbst herstellen und / oder vergleichen möchten, versuchen Sie diesen Spezifitätsrechner: https://specificity.keegan.st/ oder verwenden Sie einfach herkömmliches Papier / Bleistift.

Weitere Informationen finden Sie in MDN Web Docs .

Alles Gute für die Nichtbenutzung !important.

Wenn Sie die bakground-noneKlasse nach den anderen Klassen auflisten, überschreiben ihre Eigenschaften die bereits festgelegten. Es besteht keine Notwendigkeit, !importanthier zu verwenden .

Beispielsweise:

.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 Selektor weniger oder gleich spezifisch ist.

LIFO ist die Art und Weise, wie der Browser CSS-Eigenschaften analysiert. Wenn Sie Sass verwenden, deklarieren Sie eine Variable mit dem Namen

"$ 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-Hintergrund;

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