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

Question

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

input {
 ... 
 ...
}

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

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

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

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

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

input.mod {
 ...
 ...
}

Answer 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, вы можете установить стиль для всех элементов, а затем сбросить его с помощью класса.

input { background-color: green; }
input.avoidme { background-color: white; }

Answer 2

Вы также можете сделать это, «отменив» изменения в классе сброса только в CSS.

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

Answer 3

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

input:not(.reset) { }

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

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

Answer 4

Вы также можете подойти к этому, нацелив атрибут как этот:

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

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

Answer 5

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

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

Эта страница содержит 168 делителей, у которых нет класса 'comment-copy'

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

Answer 6

вместо class = "reset" вы можете изменить логику, установив class = "valid". Вы можете добавить это по умолчанию и удалить класс для сброса стиля.

Итак, из вашего примера и Tomas '

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"/>