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

Question

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

input { 
... 
... 
} 

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

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

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

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

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

input.mod { 
... 
... 
} 

Answer 1

В CSS3, вы можете использовать :not() фильтр, , но не все браузеры полностью поддерживают CSS3 еще, поэтому убедитесь, что вы знаете, что вы делаете который сейчас supported by all major browsers (и уже в течение некоторого времени, это старый ответ ...).

Пример:

<input type="text" value="will be matched" /> 
<input type="text" value="will not be matched" class="avoidme" /> 
<input type="text" value="will be matched" /> 

и УС

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 Platform Preview.

input:not(.reset) { } 

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

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

Answer 4

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

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

Answer 5

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

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

Эта страница имеет 168 дивы, которые не имеют класс 'комментарий-копию'

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

Answer 6

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

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

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