CSS3: niezaznaczona pseudoklasa

Wiem, że istnieje oficjalna :checkedpseudoklasa CSS3 , ale czy istnieje :uncheckedpseudoklasa i czy mają taką samą obsługę przeglądarki?

Odniesienie do Sitepoint nie wspomina o jednym, jednak ta specyfikacja whatwg (cokolwiek to jest).

Wiem, że ten sam wynik można osiągnąć , łącząc klasy :checkedi :not()pseudoklasy, ale nadal jestem ciekawy:

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

Edytować:

W3c zaleca tę samą technikę

Niezaznaczone pole wyboru można zaznaczyć za pomocą pseudoklasy negacji:

:not(:checked)

:unchecked nie jest zdefiniowany w specyfikacjach selektorów ani specyfikacji interfejsu użytkownika CSS poziomu 3, ani nie pojawił się na poziomie 4 selektorów.

W rzeczywistości cytat z W3C pochodzi ze specyfikacji Selectors 4 . Ponieważ Selectors 4 zaleca używanie :not(:checked), można bezpiecznie założyć, że nie ma odpowiedniego :uncheckedpseudo. Obsługa przeglądarek :not()i :checkedjest identyczna, więc nie powinno to stanowić problemu.

Może się to wydawać niezgodne ze stanami :enabledi :disabled, zwłaszcza, że ​​elementu nie można ani włączyć, ani wyłączyć (tj. Semantyka całkowicie nie ma zastosowania), jednak wydaje się, że nie ma żadnego wyjaśnienia tej niespójności.

( :indeterminatenie liczy się, ponieważ podobnie element nie może być odznaczony, sprawdzony ani nieokreślony, ponieważ semantyka nie ma zastosowania).

Myślę, że próbujesz zbytnio komplikować sprawy. Prostym rozwiązaniem jest domyślne ustawienie stylu pola wyboru przy użyciu niezaznaczonych stylów, a następnie dodanie zaznaczonych stylów stanu.

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

Przepraszam, że podniosłem stary wątek, ale czułem, że przydałaby się lepsza odpowiedź.

EDYCJA (03.03.2016):

Specyfikacje W3C podają, że :not(:checked)jako przykład wyboru stanu niezaznaczonego. Jest to jednak jawnie stan niezaznaczony i zastosuje te style tylko do stanu niezaznaczonego. Jest to przydatne do dodawania stylu, który jest potrzebny tylko w stanie niezaznaczonym i musiałby zostać usunięty ze stanu zaznaczonego, jeśli zostanie użyty na input[type="checkbox"]selektorze. Zobacz przykład poniżej dla wyjaśnienia.

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
}

Bez użycia :not(:checked)w powyższym przykładzie :checkedselektor musiałby użyć a, border: none;aby osiągnąć ten sam efekt .

Użyj input[type="checkbox"]do stylizacji bazowej, aby zredukować powielanie.

Użyj input[type="checkbox"]:not(:checked)dla jawnie niezaznaczonych stylów, których nie chcesz stosować do zaznaczonego stanu.

Nie ma pseudoklasy: unchecked, jednak jeśli użyjesz pseudoklasy :Check i selektora rodzeństwa, możesz rozróżnić oba stany. Uważam, że wszystkie najnowsze przeglądarki obsługują pseudoklasę: Checked. Więcej informacji można znaleźć w tym źródle: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Otrzymasz lepszą obsługę przeglądarki dzięki jquery ... możesz użyć funkcji kliknięcia, aby wykryć, kiedy kliknięcie się dzieje i czy jest zaznaczone, czy nie, możesz dodać klasę lub usunąć ją w razie potrzeby ...

Sposób, w jaki sobie z tym poradziłem, polegał na zmianie nazwy klasy etykiety na podstawie warunku. W ten sposób potrzebujesz tylko jednej etykiety i możesz mieć różne klasy dla różnych stanów ... Mam nadzieję, że to pomoże!