Стилизация с помощью CSS2, когда attr не установлен
-
20-09-2019 - |
Вопрос
Стилизовать элемент с набором атрибутов легко: E[attr]
.
Есть ли способ стилизовать элемент с помощью CSS2 на основе отсутствия атрибута, что-то вроде этого E[!attr]
?(Решение JavaScript не является вариантом).
Например, есть несколько правил класса, за которыми следует правило id:
.abc {padding:1em;}
.def {padding:2em;}
#n a {padding:0;}
HTML-код:
<div id="n"><a href="" class="abc">.</a><a href="" class="def">.</a></div>
Классы abc
и def
имеют более низкий приоритет по сравнению с правилом id, поэтому оба a
иметь отступ 0.Я не могу изменить последовательность правил, описанных выше, но могу изменить правило с идентификатором, добавив свои собственные правила.Я хочу избежать написания таких правил, как #n a.abc
для каждого класса (их много).Вместо этого мне нужно что-то вроде #n a[!class]
чтобы держать всех в курсе a
он цел.
Решение
К сожалению, не в CSS2.Лучшее, что вы можете сделать, это каскадировать свои объявления:
E {color: red}
E[attr] {color: blue}
Но даже на это нельзя полагаться, поскольку IE6 не поддерживает селекторы атрибутов.
Однако в CSS3 есть прекрасный псевдоселектор «:not» (http://www.w3.org/TR/css3-selectors/#negation).
РЕДАКТИРОВАТЬ
Спасибо за разъяснение.Как насчет:
.abc {padding:1em; !important} .def{padding:2em; !important}
#n a{padding: 1em}
Другие советы
Я не думаю, что это можно сделать в CSS2.В CSS3 вы должны использовать синтаксис «не»:
input:not([type="file"])