CSS3: deaktivierte Pseudoklasse

Ich weiß, dass es eine offizielle CSS3 :checked-Pseudoklasse gibt, aber gibt es eine :uncheckedPseudoklasse, und haben sie die gleiche Browserunterstützung?

In der Referenz von Sitepoint wird keine erwähnt, jedoch macht diese whatwg-Spezifikation (was auch immer das ist).

Ich weiß, dass das gleiche Ergebnis erzielt werden kann, wenn die Klassen :checkedund :not()Pseudoklassen kombiniert werden, aber ich bin immer noch neugierig:

input[type="checkbox"]:not(:checked) {
    /* styles */
}

Bearbeiten:

Das w3c empfiehlt die gleiche Technik

Ein deaktiviertes Kontrollkästchen kann mithilfe der Negationspseudoklasse aktiviert werden:

:not(:checked)

:unchecked ist weder in den Spezifikationen für Selectors oder CSS UI Level 3 definiert, noch wurde es in Level 4 von Selectors angezeigt.

Tatsächlich stammt das Zitat von W3C aus der Selectors 4-Spezifikation . Da Selectors 4 die Verwendung empfiehlt, :not(:checked)kann davon ausgegangen werden, dass kein entsprechendes :uncheckedPseudo vorhanden ist. Die Browserunterstützung für :not()und :checkedist identisch, sodass dies kein Problem sein sollte.

Dies mag mit den Zuständen :enabledund inkonsistent erscheinen :disabled, insbesondere da ein Element weder aktiviert noch deaktiviert werden kann (dh die Semantik trifft überhaupt nicht zu), es scheint jedoch keine Erklärung für diese Inkonsistenz zu geben.

( :indeterminatezählt nicht, da ein Element in ähnlicher Weise weder deaktiviert, aktiviert noch unbestimmt sein kann, da die Semantik nicht gilt.)

Ich denke, Sie versuchen, die Dinge zu komplizieren. Eine einfache Lösung besteht darin, Ihr Kontrollkästchen standardmäßig mit den nicht aktivierten Stilen zu formatieren und dann die aktivierten Statusstile hinzuzufügen.

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

Ich entschuldige mich dafür, dass ich einen alten Thread angesprochen habe, hatte aber das Gefühl, dass er eine bessere Antwort hätte gebrauchen können.

EDIT (03.03.2016):

In den W3C-Spezifikationen wird dies :not(:checked)als Beispiel für die Auswahl des nicht aktivierten Status angegeben. Dies ist jedoch explizit der deaktivierte Status und wendet diese Stile nur auf den deaktivierten Status an. Dies ist nützlich, um Stile hinzuzufügen, die nur im deaktivierten Status erforderlich sind und bei Verwendung im input[type="checkbox"]Selektor aus dem aktivierten Status entfernt werden müssten . Zur Verdeutlichung siehe Beispiel unten.

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

Ohne die Verwendung :not(:checked)im obigen Beispiel hätte der :checkedSelektor a verwenden müssen border: none;, um den gleichen Effekt zu erzielen.

Verwenden Sie das input[type="checkbox"]For-Base-Styling, um Doppelarbeit zu reduzieren.

Verwenden Sie die input[type="checkbox"]:not(:checked)Option für explizite ungeprüfte Stile, die Sie nicht auf den aktivierten Status anwenden möchten.

Es gibt keine: ungeprüfte Pseudoklasse. Wenn Sie jedoch die: geprüfte Pseudoklasse und den Geschwister-Selektor verwenden, können Sie zwischen beiden Zuständen unterscheiden. Ich glaube, alle neuesten Browser unterstützen die: überprüfte Pseudoklasse. Weitere Informationen finden Sie in dieser Ressource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Mit jquery erhalten Sie eine bessere Browserunterstützung. Mithilfe einer Klickfunktion können Sie erkennen, wann der Klick erfolgt. Wenn dies aktiviert ist oder nicht, können Sie bei Bedarf eine Klasse hinzufügen oder eine Klasse entfernen.

Ich habe damit umgegangen, indem ich den Klassennamen eines Labels basierend auf einer Bedingung geändert habe. Auf diese Weise benötigen Sie nur ein Etikett und können verschiedene Klassen für verschiedene Zustände haben ... Hoffe, das hilft!