Вопрос:
У меня есть что-то вроде этого
<div class=»text-holder»> <h2>this is text-holder</h2> <p>this is text</p> </div> <a href=»#» class=»ignore»> <div class=»text-holder»> <h2>this is text-holder</h2> <p>this is text</p> </div> </a> <a href=»#»> <div class=»text-holder»> <h2>this is text-holder</h2> <p>this is text</p> </div> </a>
И CSS, который делает это
.text-holder { color: green; } a { color: red; other css } .ignore { other css }
Есть ли способ, которым ссылка может игнорировать стиль css для глобального стиля и просто использовать игнорирование? Я не хочу использовать !important потому что будут другие экземпляры текстового держателя, которые захотят использовать глобальный стиль.
РЕДАКТИРОВАТЬ
Спасибо за все ответы, но позвольте мне быть немного более ясными, поэтому, надеюсь, вы понимаете лучше. (Не лучший из объяснений)
Проблема заключается в том, что text-holder имеет текстовый стиль из глобальных p, h2 и т.д., Которые выше a в иерархии таблицы стилей. поэтому p, h2, a, .ignore, .text-holder т.д.
a имеет много информации об этом, hover, visited, focus, color, font-weight и т.д. Теперь для всех divs я хотел проигнорировать эту информацию, я искал, был ли простой способ просто создать ignore а не для всех div, я хочу игнорировать его, чтобы перезаписать их со всей переписанной информацией.
Лучший ответ:
CSS не поддерживает “игнорирование”, но часть его характера (каскадная часть каскадных таблиц стилей) поддерживает “переписывание”; Новые свойства CSS будут перезаписывать старые CSS свойство одного и то же имя, так что вам просто нужно дать .ignore другого color значения, чем предыдущий a селектор color значение.
Ответ №1
Есть ли способ, которым ссылка может игнорировать стиль css для глобального стиля и просто использовать игнорирование?
Нет. Если селектор соответствует, тогда будут применяться все применимые правила в нем.
.ignore по крайней мере так же специфичен, как и все предыдущие правила, поэтому вам просто нужно установить свойства, которые вы хотите переопределить, до нужного значения.
Ответ №2
Да, в основном то, что вы пытаетесь сделать, это уже то, как работает CSS.
Ключом к пониманию является понятие специфичности.
- Правила CSS, применяемые атрибутом style=»» имеют вес 1000.
- Правила, применяемые к селектору #id, имеют вес 100.
- Правила, применяемые к селектору .class, имеют вес 10.
- И правила, применяемые к имени тега element или :pseudo-selector получают вес 1.
Так, например, если у вас есть…
a { color: red; } .ignore { color: black; }
Вес red ссылок равен 1, а вес black текста – 10, поэтому черный имеет более высокую специфичность и победит.
Важная концепция заключается в том, что .ignore не говорит ему игнорировать свое прежнее назначение, это вместо этого способ переопределить назначение.
РЕДАКТИРОВАТЬ
Я также должен добавить, что каскадные правила не имеют веса, поэтому любое определение в дочернем элементе будет переопределять их.
Например:
a { color: red; } .ignore { color: black; } div { color: blue; } <a class=»ignore»><div>hello world</div></a>
Текст будет синим, а не черным, потому что тег div имеет применимое к нему правило, которое переопределяет каскадный черный цвет из класса .ignore.
Ответ №3
Можешь попробовать:
:not(.ignore) .text-holder { color: green; }
Или, если вы переместите свой класс игнорирования в элемент.text-holder
.text-holder:not(.ignore) { color: green; }
