Wie kann ich auf Eingabeelemente abzielen, die nicht zu einer bestimmten Klasse in CSS gehören?

CSS-Selektoren ohne Negation

In CSS kann die Auswahl von Elementen, die bestimmte Kriterien nicht erfüllen, aufgrund des Fehlens eines dedizierten „ nicht" Selektor. Diese Einschränkung wird von Webentwicklern schon seit Jahren erkannt, sodass sie nach alternativen Lösungen suchen müssen.

Beachten Sie die folgende CSS-Regel:

.classname input {
  background: red;
}

Diese Regel weist allen darin enthaltenen Eingabefeldern einen roten Hintergrund zu HTML-Elemente mit dem Klassennamen „classname“. Angenommen, Sie möchten Eingabefelder innerhalb von „classname“-Elementen vom roten Hintergrundstil ausschließen. Wie kann dies erreicht werden?

Aktuelle Browserunterstützung

Leider unterstützen aktuelle Webbrowser keine negativen Selektoren in CSS. Das bereitgestellte Beispiel kann nicht allein mit CSS erreicht werden.

Alternative Lösungen

Während CSS keinen negativen Selektor hat, gibt es alternative Lösungen:

• Verwenden Sie JavaScript oder jQuery: JavaScript-Frameworks wie jQuery bieten Methoden wie :not(), um Elemente auszuwählen, die einem bestimmten Kriterium nicht entsprechen.

<code class="js">$j(':not(.classname)>input').css({background:'red'});</code>

• Verschachtelte Regeln:Durch die Verwendung verschachtelter Regeln können Sie indirekt bestimmte Elemente von einem Stil ausschließen:

input {
  background: #ccc;
}

.classname input {
  background: red;
}

In diesem Beispiel haben alle Eingabefelder standardmäßig einen grauen Hintergrund. Innerhalb von Elementen mit dem Klassennamen „classname“ überschreiben Eingabefelder diesen Stil mit einem roten Hintergrund. Beachten Sie, dass sich dieser Ansatz auf den Stil aller Eingabefelder innerhalb des „classname“-Elements auswirkt, unabhängig von ihrer Position.

Es ist wichtig zu beachten, dass die Browserunterstützung für negative CSS-Selektoren zwar schon seit Jahren diskutiert wird, dies aber immer noch der Fall ist Zum Zeitpunkt dieses Schreibens gibt es keine offizielle Implementierung. Da sich die Browsertechnologien weiterentwickeln, wird diese Funktionalität möglicherweise in Zukunft verfügbar sein.

Das obige ist der detaillierte Inhalt vonWie kann ich auf Eingabeelemente abzielen, die nicht zu einer bestimmten Klasse in CSS gehören?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!