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


103

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

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

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

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

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

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

Ответы:


95

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

.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как они использовались в вопросе. Это примеры имен классов, которые не следует использовать, поскольку они отражают конкретную визуализацию, а не структурные или семантические роли.


Вы написали, что это примеры имен классов, которые не следует использовать, поскольку они отражают конкретную визуализацию, а не структурные или семантические роли. Не могли бы вы уточнить, пожалуйста? Почему следует leftи чего следует background-noneизбегать?
Socrates

1
@Socrates: Некоторые люди считают, что классам css следует давать только имена, которые определяют, к какому элементу он применяется, или что он делает (например button, name-labelи т. Д.). Другие считают, что CSS становится неуправляемым, если вы используете этот подход, и вам следует использовать CSS-файлы «в первую очередь» или «функциональные», где классы соответствуют значениям свойств (например margin-top-4, width-10и т. Исторически «семантический» подход был доминирующим, в то время как в последнее время «функциональный» подход набирает приверженцев. Попробуйте оба варианта на проекте среднего размера, а затем решите для себя, что лучше.
Маттиа

61

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

background:none !important;

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


45
! important - плохая практика. Вскоре весь код становится важным.
TPAKTOPA

28

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

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

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

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


27

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

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

введите описание изображения здесь

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

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

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

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


9

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

Например:

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

а также

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

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


Спасибо за ответ! Я пробовал это как первое решение, но по какой-то причине это не сработало!
user3075049 06

Этот способ переопределения классов css не будет работать, если стили определены особым образом, например .form-horizontal .form-group {margin-left: -15px}. Здесь вам придется использовать!
Important

добавить! важно в .background-none {background: none! importatn; } это отлично работает
santhosh

1

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

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

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

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

тогда

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.