Есть ли селектор CSS not equals?

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

input {
 ... 
 ...
}

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

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

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

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

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

input.mod {
 ...
 ...
}
107
css css-selectors css3 html

6 ответов

в CSS3 вы можете использовать , но не все браузеры полностью поддерживают 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; }
145

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

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

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

input:not(.reset) { }

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

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

8

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

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

эта страница имеет 168 divs, которые не имеют класса "comment-copy"

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

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

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

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

3

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