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

Question

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

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

input {

 ... 

 ...

}

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

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

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

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

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

input.mod {

 ...

 ...

}

618 6

html css css3 css-selectors

6 ответов:

Comments

Ничего не найдено.

Tomas Lycken · Accepted Answer · 2017-09-21 01:02:09

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

AvatarKava · Accepted Answer · 2010-07-28 17:40:45

вы также можете сделать это, "возвращая" изменения в классе reset только в CSS.
INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

Andy E · Accepted Answer · 2010-07-28 17:41:05

CSS3 имеет :not(), но это еще не реализовано во всех браузерах. Однако он реализован в предварительном просмотре платформы IE9.
input:not(.reset) { }
http://www.w3.org/TR/css3-selectors/#negation

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

Naveed · Accepted Answer · 2013-04-06 01:28:19

интересно просто попробовал это для выбора элемента DOM с помощью JQuery и он работает! :)
$("input[class!='bad_class']");
эта страница имеет 168 дивов, которые не имеют класса 'comment-copy'
$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

Dylan Auty · Accepted Answer · 2017-02-22 14:28:13

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

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

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

Qazzian · Accepted Answer · 2010-07-28 19:18:44

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

Итак, из вашего примера и Томаса
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"/>