Wie die Eigenschaften einer CSS-Klasse außer Kraft setzt eine andere CSS-Klasse

Question

ich CSS3 recht neu bin und ich möchte in der Lage sein, Folgendes zu tun:

Wenn ich eine Klasse in ein Element hinzufügen, es ist die überschreibt Eigenschaften einer anderen Klasse, die in diesem spezifischen Element verwendet wird.

Lassen Sie uns sagen, dass ich

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

Ich möchte eine Klasse hinzufügen können bakground-none genannt, welche die Standardhintergrund in der Klasse left wird über außer Kraft setzen.

Danke!

Answer 1

Verwenden Sie einfach !important es wird helfen,

background:none !important; 

Werfen Sie einen Blick auf diese außer Kraft zu setzen: when-using-important-is-the-right-choice

Answer 2

Wenn Sie die bakground-none Klasse nach der anderen Klassen aufzulisten, werden seine Eigenschaften, die bereits überschreiben. Sie brauchen !important hier nicht zu verwenden.

Zum Beispiel:

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

und

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

Der Link wird nicht einen roten Hintergrund haben. Bitte beachten Sie, dass dies nur Eigenschaften überschreibt, die einen Selektor haben, der weniger oder gleich spezifisch ist.

Answer 3

Als eine Alternative zum important Schlüsselwort Sie den Wähler präziser, zum Beispiel machen könnten:

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

(Anmerkung: kein Raum zwischen den Klassennamen).

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

Answer 4

Es gibt verschiedene Arten, wie Eigenschaften überschrieben werden können. Angenommen, Sie haben

z. irgendeines der folgenden würde es überschreiben:

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

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

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

.background-none { background: none; } 

gewinnt einfach durch Auftrag, das heißt durch nach eine sonst gleich „mächtig“ Regel zu sein. 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 Cascade, ein entscheidendes, aber weithin missverstandenes Konzept. Es definiert die genauen Regeln für das Lösen von Konflikten zwischen Stylesheet-Regeln.

P.S. Ich benutzte left und background-none, wie sie in der Frage verwendet wurden. Sie sind Beispiele für Klassennamen, die nicht verwendet werden sollten, da sie spezifische Rendering- und nicht strukturelle oder semantische Rollen widerspiegeln.

Answer 5

LIFO ist der Weg Browser CSS properties..If parst Sie verwenden Sass eine Variable als

genannt erklären "$ header-background: red;"

verwenden Sie es, anstatt Werte wie rot oder blau direkt zuzuweisen. Wenn Sie außer Kraft setzen nur den Wert

zuweisen

"$ header-background: blue"

dann

background-color: $ header-Hintergrund;

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

Answer 6

Sie sollten durch Erhöhung Spezifizität Ihres Styling überschreiben. Es gibt verschiedene Möglichkeiten, die Spezifität zu erhöhen. Verwendung von !important, die Auswirkungen hat, ist eine schlechte Praxis, weil es natürliche Kaskadierung in Ihrem Stylesheet bricht.

Das folgende Diagramm von css-tricks.com hilft Ihnen, die richtige Spezifität für Ihr Element basierend auf einer Punktstruktur zu erstellen. Welche Spezifität auch immer Punkte hat, wird gewinnen. Klingt nach einem Spiel - oder?

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

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

Für weitere Informationen versuchen Sie MDN Web Docs.

Alles Gute für die Nichtbenutzung !important.