Gibt es ein CSS, das nicht gleich Selektor ist?

Gibt es so etwas wie! = (Nicht gleich) in CSS? zB habe ich folgenden Code:

input {
 ... 
 ...
}

aber für einige Eingaben muss ich dies aufheben. Ich möchte dies tun, indem ich dem Eingabe-Tag die Klasse "reset" hinzufüge, z

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

und überspringen Sie dann einfach dieses Tag aus CSS.

Wie kann ich das machen?

Die einzige Möglichkeit, die ich sehen kann, besteht darin, dem Eingabe-Tag eine Klasse hinzuzufügen und das CSS wie folgt neu zu schreiben:

input.mod {
 ...
 ...
}

In CSS3 können Sie den :not()Filter verwenden, aber noch nicht alle Browser unterstützen CSS3 vollständig. Stellen Sie daher sicher, dass Sie wissen, was Sie tun, was jetzt von allen gängigen Browsern unterstützt wird (und das schon seit einiger Zeit; dies ist eine alte Antwort ...).

Beispiel:

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

und das CSS

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

Hinweis: Diese Problemumgehung sollte nicht mehr erforderlich sein. Ich lasse es hier für den Kontext.

Wenn Sie CSS3 nicht verwenden möchten, können Sie den Stil für alle Elemente festlegen und ihn dann mit einer Klasse zurücksetzen.

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

Sie können dies auch tun, indem Sie die Änderungen an der Rücksetzklasse nur in CSS zurücksetzen.

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

CSS3 hat :not(), aber es ist noch nicht in allen Browsern implementiert. Es ist jedoch in der IE9-Plattformvorschau implementiert.

input:not(.reset) { }

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

In der Zwischenzeit müssen Sie sich an die altmodischen Methoden halten.

Sie können dies auch erreichen, indem Sie auf ein Attribut wie das folgende abzielen:

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

In diesem Fall haben alle Eingaben, die nicht vom Typ "Kontrollkästchen" sind, eine Breite von 100%.

Interessanterweise habe ich dies gerade für die Auswahl des DOM-Elements mit JQuery versucht und es funktioniert! :) :)

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

Diese Seite hat 168 Divs, die keine Klasse 'Kommentar-Kopie' haben.

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

Anstelle von class = "reset" können Sie die Logik umkehren, indem Sie class = "valid" haben. Sie können dies standardmäßig hinzufügen und die Klasse entfernen, um den Stil zurückzusetzen.

Also aus deinem Beispiel und Tomas '

input.valid {
 ... 
 ...
}

und

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