Есть ли что-то вроде!= (не равно) в CSS? например, у меня есть следующий код:
input {
...
...
}
но для некоторых входов мне нужно аннулировать это. Я хотел бы сделать это, добавив класс "reset" к входному тегу, например.
<input class="reset" ... />
а затем просто пропустите этот тег из CSS.
Как я могу это сделать?
Единственный способ, которым я могу видеть, - добавить некоторый класс во входной тег и переписать CSS следующим образом:
input.mod {
...
...
}
В CSS3 вы можете использовать фильтр :not(), , но не все браузеры полностью поддерживают CSS3, поэтому убедитесь, что знаете, что вы делаете, который сейчас
поддерживается всеми основными браузерами (и был довольно продолжительным, это старый ответ...).
Пример:
<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />
и CSS
input:not(.avoidme) { background-color: green; }
Примечание: это обходное решение больше не требуется; Я оставляю его здесь для контекста.
Если вы не хотите использовать CSS3, вы можете установить стиль для всех элементов, а затем reset с классом.
input { background-color: green; }
input.avoidme { background-color: white; }
Вы также можете сделать это, "вернув" изменения в классе reset только в CSS.
INPUT {
padding: 0px;
}
INPUT.reset {
padding: 4px;
}
CSS3 имеет :not(), но он еще не реализован во всех браузерах. Однако он реализован в IE9 Platform Preview.
input:not(.reset) { }
http://www.w3.org/TR/css3-selectors/#negation
Тем временем вам придется придерживаться старомодных методов.
Интересно, просто попробовал это для выбора элемента DOM с помощью JQuery, и он работает!:)
$("input[class!='bad_class']");
На этой странице есть 168 divs, у которых нет класса 'comment-copy'
$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
Вы также можете приблизиться к этому, настроив атрибут следующим образом:
input:not([type=checkbox]){
width:100%;
}
В этом случае все входы, которые не являются 'checkbox', будут иметь ширину 100%.
вместо class= "reset" вы можете отменить логику, имея class= "valid" Вы можете добавить это по умолчанию и удалить класс до reset стиля.
Итак, из вашего примера и Томаса
input.valid {
...
...
}
и
<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>