Esiste un selettore CSS diverso da quello?

C'è qualcosa come! = (Non uguale) nei CSS? ad esempio, ho il seguente codice:

input {
 ... 
 ...
}

ma per alcuni input ho bisogno di annullarlo. Mi piacerebbe farlo aggiungendo la classe "reset" al tag di input, ad es

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

e quindi salta semplicemente questo tag da CSS.

Come posso farlo?

L'unico modo che posso vedere sarebbe aggiungere una classe al tag di input e riscrivere il CSS come segue:

input.mod {
 ...
 ...
}

In CSS3, puoi utilizzare il :not()filtro, ma non tutti i browser supportano ancora completamente CSS3, quindi assicurati di sapere cosa stai facendo che ora è supportato da tutti i principali browser (ed è stato per un po 'di tempo; questa è una vecchia risposta ...).

Esempio:

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

e il CSS

input:not(.avoidme) { background-color: green; }

Nota: questa soluzione alternativa non dovrebbe più essere necessaria; Lo lascio qui per il contesto.

Se non vuoi usare CSS3, puoi impostare lo stile su tutti gli elementi e poi reimpostarlo con una classe.

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

Puoi anche farlo "ripristinando" le modifiche sulla classe di ripristino solo in CSS.

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

CSS3 lo ha :not(), ma non è ancora implementato in tutti i browser. Tuttavia, è implementato nell'anteprima della piattaforma IE9.

input:not(.reset) { }

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

Nel frattempo, dovrai attenersi ai metodi antiquati.

Puoi anche affrontarlo scegliendo come target un attributo come questo:

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

In questo caso tutti gli input che non sono di tipo "checkbox" avranno una larghezza del 100%.

Interessante appena provato questo per selezionare l'elemento DOM utilizzando JQuery e funziona! :)

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

Questa pagina ha 168 div che non hanno la classe "commento-copia"

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

invece di class = "reset" potresti invertire la logica con class = "valid" Puoi aggiungerlo di default e rimuovere la classe per ripristinare lo stile.

Quindi dal tuo esempio e da quello di Tomas

input.valid {
 ... 
 ...
}

e

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