Jak przesłonić właściwości klasy CSS przy użyciu innej klasy CSS

Jestem całkiem nowy w CSS3 i chcę mieć możliwość wykonywania następujących czynności:

Kiedy dodaję klasę do elementu, nadpisuje ona właściwości innej klasy używanej w tym konkretnym elemencie.

Powiedzmy, że tak

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

Chcę mieć możliwość dodania klasy o nazwie bakground-none, która zastąpi domyślne tło w klasie left.

Dzięki!

Istnieje kilka sposobów nadpisywania właściwości. Zakładając, że masz

.left { background: blue }

np. którekolwiek z poniższych mogłoby go zastąpić:

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

Pierwsze dwa „wygrywają” dzięki specyficzności selektora; trzeci wygrywa !important, tępy instrument.

Możesz również zorganizować swoje arkusze stylów tak, aby np

.background-none { background: none; }

wygrywa po prostu porządku, czyli będąc po skądinąd jednakowo „potężnego” reguły. Ale to nakłada ograniczenia i wymaga zachowania ostrożności przy każdej reorganizacji arkuszy stylów.

To wszystko przykłady CSS Cascade , kluczowej, ale powszechnie niezrozumianej koncepcji. Definiuje dokładne zasady rozwiązywania konfliktów między regułami arkusza stylów.

PS użyłem lefti background-nonetak jak zostały użyte w pytaniu. Są to przykłady nazw klas, których nie należy używać, ponieważ odzwierciedlają one określone renderowanie, a nie role strukturalne lub semantyczne.

Po prostu użyj !importantgo, aby zastąpić

background:none !important;

Chociaż mówi się, że jest to zła praktyka, !importantmoże być przydatna w przypadku klas narzędzi, po prostu musisz jej używać odpowiedzialnie, sprawdź to: Kiedy Korzystanie z ważnych jest właściwym wyborem

Alternatywnie do importantsłowa kluczowego możesz sprecyzować selektor, na przykład:

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

(Uwaga: brak spacji między nazwami klas).

W takim przypadku reguła będzie obowiązywać, gdy oba .lefti .background-nonezostaną wymienione w atrybucie klasy (niezależnie od kolejności lub bliskości).

Powinieneś to zmienić, zwiększając Specyfika swojej stylizacji. Specyfika można zwiększyć na różne sposoby. Korzystanie ze !importantspecyficzności efektów jest złą praktyką, ponieważ przerywa naturalne kaskadowanie w arkuszu stylów.

Poniższy diagram zaczerpnięty z css-tricks.com pomoże Ci stworzyć odpowiednią specyfikację dla Twojego elementu w oparciu o strukturę punktów. Niezależnie od tego, która specyfika ma wyższe punkty, wygra. Brzmi jak gra - prawda?

Przykładowe obliczenia w usłudze Checkout tutaj na css-tricks.com . Pomoże Ci to bardzo dobrze zrozumieć koncepcję i zajmie tylko 2 minuty.

Jeśli chcesz samodzielnie wytwarzać i / lub porównywać różne specyfikacje, wypróbuj ten kalkulator specyficzności: https://specificity.keegan.st/ lub możesz po prostu użyć tradycyjnego papieru / ołówka.

Aby dowiedzieć się więcej, wypróbuj MDN Web Docs .

Wszystkiego najlepszego, aby nie używać !important.

Jeśli umieścisz bakground-noneklasę po innych klasach, jej właściwości zastąpią te już ustawione. Nie ma potrzeby używania !importanttutaj.

Na przykład:

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

i

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

Link nie będzie miał czerwonego tła. Należy pamiętać, że zastępuje to tylko właściwości, które mają mniej lub równie dokładny selektor.

LIFO to sposób, w jaki przeglądarka analizuje właściwości CSS. Jeśli używasz Sass, zadeklaruj zmienną o nazwie as

"$ header-background: red;"

użyj go zamiast bezpośredniego przypisywania wartości, takich jak czerwony lub niebieski. Jeśli chcesz przesłonić, po prostu ponownie przypisz wartość

„$ header-background: blue”

następnie

background-color: $ header-background;

powinien płynnie zastąpić. Używanie „! Important” nie zawsze jest właściwym wyborem… to tylko poprawka