Я новичок в 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, ключевая, но широко понятая концепция. Он определяет точные правила для разрешения конфликтов между правилами таблицы стилей.
P.S. Я использовал left и background-none, поскольку они использовались в вопросе. Они являются примерами имен классов, которые не должны использоваться, поскольку они отражают определенные рендеринг, а не структурные или семантические роли.
Просто используйте !important, это поможет переопределить
background:none !important;
Взгляните на это: когда-использование-важно-это-право-выбор
В качестве альтернативы ключевому слову important вы можете сделать селектор более конкретным,
например:
.left.background-none { background:none; }
(Примечание: нет пробелов между именами классов).
В этом случае правило будет применяться, если оба атрибута .left и .background-none перечислены в атрибуте класса (независимо от порядка или близости).
Если вы перечислите класс bakground-none после других классов, его свойства переопределяют уже установленные. Здесь нет необходимости использовать !important.
Например:
.red { background-color: red; }
.background-none { background: none; }
и
<a class="red background-none" href="#carousel">...</a>
Ссылка не будет иметь красный фон. Обратите внимание, что это только отменяет свойства, у которых есть селектор, который меньше или одинаково специфичен.
LIFO - это способ, которым браузер анализирует свойства CSS. Если вы используете Sass, объявляете переменную, называемую
"$ header-background: red;"
используйте его вместо прямого назначения значений, таких как красный или синий. Если вы хотите переопределить только переназначение значения на
"$ заголовок-фон: синий"
затем
цвет фона: $заголовок-фон;
он должен плавно переопределить. Использование "! Important" не всегда является правильным выбором. Это просто исправление
Вы должны переопределить, увеличив Специфика вашего стиля. Существуют разные способы повышения Специфичности. Использование !important, которое влияет на специфичность, является плохой практикой, поскольку оно нарушает естественное каскадирование в вашей таблице стилей.
Следующая диаграмма, взятая из css-tricks.com, поможет вам создать правильную специфичность для вашего элемента на основе структуры точек. Какая бы специфичность имела более высокие очки, победит. Звучит как игра - не так ли?
Вычислить примерные расчеты здесь на css-tricks.com. Это поможет вам понять концепцию очень хорошо, и это займет всего 2 минуты.
Если вам нравится создавать и/или сравнивать разные особенности самостоятельно, попробуйте этот калькулятор спецификаций: https://specificity.keegan.st/ или вы можете просто использование традиция бумага/карандаш.
Для дальнейшего чтения попробуйте MDN Web Docs.
Все самое лучшее для использования !important.