Come sovrascrivere le proprietà di una classe CSS utilizzando un'altra classe CSS

Sono abbastanza nuovo in CSS3 e voglio essere in grado di fare quanto segue:

Quando aggiungo una classe in un elemento, sovrascrive le proprietà di un'altra classe utilizzata in questo elemento specifico.

Diciamo che l'ho fatto

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

Voglio essere in grado di aggiungere una classe chiamata bakground-none, che sovrascriverà lo sfondo predefinito nella classe left.

Grazie!

Esistono diversi modi in cui le proprietà possono essere sovrascritte. Supponendo che tu l'abbia fatto

.left { background: blue }

ad esempio, una delle seguenti operazioni lo sovrascriverebbe:

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

I primi due "vincono" per specificità del selettore; vince il terzo !important, strumento spuntato.

Puoi anche organizzare i tuoi fogli di stile in modo che, ad esempio, la regola

.background-none { background: none; }

vince semplicemente per ordine, vale a dire per essere dopo una regola altrimenti altrettanto “potente”. Ma questo impone delle restrizioni e richiede che tu stia attento in qualsiasi riorganizzazione dei fogli di stile.

Questi sono tutti esempi di CSS Cascade , un concetto cruciale ma ampiamente frainteso. Definisce le regole esatte per risolvere i conflitti tra le regole del foglio di stile.

PS ho usato lefte background-nonecome sono stati usati nella domanda. Sono esempi di nomi di classi che non dovrebbero essere usati, poiché riflettono una resa specifica e non ruoli strutturali o semantici.

Basta usarlo !importantaiuterà a sovrascrivere

background:none !important;

Anche se si dice che sia una cattiva pratica, !importantpuò essere utile per le classi di utilità, devi solo usarlo in modo responsabile, controlla questo: Quando Usare important è la scelta giusta

In alternativa alla importantparola chiave, potresti rendere il selettore più specifico, ad esempio:

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

(Nota: nessuno spazio tra i nomi delle classi).

In questo caso, la regola verrà applicata quando entrambi .lefte .background-nonesono elencati nell'attributo di classe (indipendentemente dall'ordine o dalla prossimità).

Dovresti sovrascrivere aumentando la specificità del tuo stile. Esistono diversi modi per aumentare la specificità. L'utilizzo della !importantspecificità degli effetti è una cattiva pratica perché interrompe la cascata naturale nel foglio di stile.

Il seguente diagramma tratto da css-tricks.com ti aiuterà a produrre la giusta specificità per il tuo elemento in base a una struttura a punti. Qualunque specificità abbia punti più alti, vincerà. Sembra un gioco, non è vero?

Controlla i calcoli di esempio qui su css-tricks.com . Questo ti aiuterà a capire molto bene il concetto e ci vorranno solo 2 minuti.

Se poi ti piace produrre e / o confrontare diverse specificità da solo, prova questo Calcolatore di specificità: https://specificity.keegan.st/ oppure puoi semplicemente usare carta / matita tradizionale.

Per ulteriori letture, prova MDN Web Docs .

Tutto il meglio per non usare !important.

Se elenchi la bakground-noneclasse dopo le altre classi, le sue proprietà sovrascriveranno quelle già impostate. Non è necessario utilizzare !importantqui.

Per esempio:

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

e

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

Il collegamento non avrà uno sfondo rosso. Si noti che questo sovrascrive solo le proprietà che hanno un selettore meno o ugualmente specifico.

LIFO è il modo in cui il browser analizza le proprietà CSS. Se stai usando Sass, dichiara una variabile chiamata come

"$ header-background: rosso;"

usalo invece di assegnare direttamente valori come rosso o blu. Quando si desidera eseguire l'override, è sufficiente riassegnare il valore a

"$ header-background: blue"

poi

background-color: $ header-background;

dovrebbe sostituire senza problemi. L'utilizzo di "! Important" non è sempre la scelta giusta ... è solo un hotfix