Как переопределить свойства класса CSS с помощью другого класса CSS

Я новичок в CSS3 и хочу уметь делать следующее:

Когда я добавляю класс в элемент, он переопределяет свойства другого класса, используемого в этом конкретном элементе.

Допустим, у меня есть

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

Я хочу иметь возможность добавить класс с именем bakground-none, который переопределит фон по умолчанию в классе left.

Благодарность!

Есть разные способы переопределения свойств. Предполагая, что у вас есть

.left { background: blue }

например, любое из следующего может переопределить его:

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

Первые два «выигрывают» по специфике селектора; третий побеждает !importantтупым инструментом.

Вы также можете организовать свои таблицы стилей так, чтобы, например, правило

.background-none { background: none; }

выигрывает просто по порядку, то есть, будучи после иначе одинаково «мощными» правил. Но это накладывает ограничения и требует от вас осторожности при любой реорганизации таблиц стилей.

Все это примеры CSS Cascade , важной, но часто неправильно понимаемой концепции. Он определяет точные правила разрешения конфликтов между правилами таблицы стилей.

PS Я использовал leftи background-noneкак они использовались в вопросе. Это примеры имен классов, которые не следует использовать, поскольку они отражают конкретную визуализацию, а не структурные или семантические роли.

Просто используйте !importantэто поможет преодолеть

background:none !important;

Хотя это считается плохой практикой, !importantможет быть полезен для служебных классов, вам просто нужно использовать его ответственно, проверьте это: Когда Использование важно - правильный выбор

В качестве альтернативы importantключевому слову вы можете сделать селектор более конкретным, например:

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

(Примечание: между названиями классов нет пробелов).

В этом случае правило будет применяться, когда оба .leftи .background-noneуказаны в атрибуте класса (независимо от порядка или близости).

Вы должны переопределить, увеличив Специфичность вашего стиля. Есть разные способы увеличения Специфичности. Использование того, !importantчто влияет на специфичность, является плохой практикой, потому что это нарушает естественное каскадирование в вашей таблице стилей.

Следующая диаграмма, взятая с css-tricks.com , поможет вам создать правильную специфику для вашего элемента на основе структуры точек. Какая бы специфика ни имела более высокие баллы, победит. Похоже на игру, не так ли?

Ознакомьтесь с примерами расчетов здесь, на css-tricks.com . Это поможет вам очень хорошо понять концепцию и займет всего 2 минуты.

Если вы затем хотите самостоятельно производить и / или сравнивать различные характеристики, попробуйте этот калькулятор специфичности: https://specificity.keegan.st/ или вы можете просто использовать обычную бумагу / карандаш.

Для дальнейшего чтения попробуйте MDN Web Docs .

Всего наилучшего, чтобы не использовать !important.

Если вы укажете bakground-noneкласс после других классов, его свойства переопределят уже установленные. Здесь нет необходимости !important.

Например:

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

а также

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

У ссылки не будет красного фона. Обратите внимание, что это переопределяет только те свойства, для которых селектор менее или менее конкретен.

LIFO - это способ, которым браузер анализирует свойства CSS .. Если вы используете Sass, объявите переменную с именем

"$ header-background: красный;"

используйте его вместо прямого присвоения значений, таких как красный или синий. Если вы хотите переопределить, просто переназначьте значение на

"$ header-background: синий"

тогда

цвет фона: $ header-background;

он должен плавно отменяться. Использование "! Important" не всегда является правильным выбором .. Это просто исправление