Есть ли CSS не равно селектору?

Есть ли что-то вроде!= (не равно) в CSS? например, у меня есть следующий код:

input {
 ... 
 ...
}

но для некоторых входов мне нужно аннулировать это. Я хотел бы сделать это, добавив класс "reset" к входному тегу, например.

<input class="reset" ... />

а затем просто пропустите этот тег из CSS.

Как я могу это сделать?

Единственный способ, которым я могу видеть, - добавить некоторый класс во входной тег и переписать CSS следующим образом:

input.mod {
 ...
 ...
}

Ответы

Ответ 1

В 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; }

Ответ 2

Вы также можете сделать это, "вернув" изменения в классе reset только в CSS.

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

Ответ 3

CSS3 имеет :not(), но он еще не реализован во всех браузерах. Однако он реализован в IE9 Platform Preview.

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

Тем временем вам придется придерживаться старомодных методов.

Ответ 4

Интересно, просто попробовал это для выбора элемента DOM с помощью JQuery, и он работает!:)

$("input[class!='bad_class']");

На этой странице есть 168 divs, у которых нет класса 'comment-copy'

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

Ответ 5

Вы также можете приблизиться к этому, настроив атрибут следующим образом:

input:not([type=checkbox]){ width:100%; }

В этом случае все входы, которые не являются 'checkbox', будут иметь ширину 100%.

Ответ 6

вместо 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"/>