CSS3: непроверенный псевдокласс

Я знаю, что существует официальный :checkedпсевдокласс CSS3 , но есть ли :uncheckedпсевдокласс и есть ли у них такая же поддержка браузером?

Ссылка Sitepoint не упоминает ни одного, однако эта спецификация whatwg (что бы это ни было) делает.

Я знаю , что тот же результат может быть достигнут , когда :checkedи :not()псевдо-классы объединяются, но я все еще интересно:

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

Редактировать:

W3c рекомендует ту же технику

Не отмеченный флажок можно установить с помощью псевдокласса отрицания:

:not(:checked)

:unchecked не определен ни в спецификациях селекторов, ни в спецификациях уровня 3 пользовательского интерфейса CSS, ни в 4-м уровне селекторов.

Фактически, цитата из W3C взята из спецификации Selectors 4 . Поскольку Selectors 4 рекомендует использовать :not(:checked), можно с уверенностью предположить, что соответствующего :uncheckedпсевдонима нет. Поддержка браузером :not()и :checkedидентична, так что это не должно быть проблемой.

Это может показаться несовместимым с :enabledи :disabledсостояниями, тем более , что элемент не может быть ни включен , ни выключен (то есть семантика полностью не применяются), однако там не наблюдается никаких объяснений этого несоответствия.

( :indeterminateне учитывается, потому что элемент не может быть ни снят, ни проверен, ни неопределенен, потому что семантика не применяется.)

Я думаю, вы пытаетесь все усложнить. Простое решение - просто стилизовать ваш флажок по умолчанию с неотмеченными стилями, а затем добавить стили отмеченного состояния.

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

Я прошу прощения за то, что поднял старую ветку, но чувствовал, что мог бы использовать лучший ответ.

РЕДАКТИРОВАТЬ (3/3/2016):

В спецификациях W3C это :not(:checked)указано в качестве примера для выбора состояния unchecked. Однако это явно непроверенное состояние, и эти стили будут применяться только к непроверенному состоянию. Это полезно для добавления стилей, которые необходимы только в непроверенном состоянии и должны быть удалены из отмеченного состояния, если они используются в input[type="checkbox"]селекторе. См. Пример ниже для пояснения.

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
}

Без использования :not(:checked)в приведенном выше примере :checkedселектор должен был бы использовать a border: none;для достижения того же эффекта.

Используйте input[type="checkbox"]для базовой стилизации, чтобы уменьшить дублирование.

Используйте input[type="checkbox"]:not(:checked)для явных неотмеченных стилей, которые вы не хотите применять к отмеченному состоянию.

Псевдокласса: unchecked нет, однако, если вы используете псевдокласс: checked и родственный селектор, вы можете различать оба состояния. Я считаю, что все последние версии браузеров поддерживают псевдокласс: checked, дополнительную информацию можно найти на этом ресурсе: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Вы получите лучшую поддержку браузера с помощью jquery ... вы можете использовать функцию щелчка, чтобы определить, когда происходит щелчок, и если он отмечен или нет, вы можете добавить класс или удалить класс по мере необходимости ...

Я справился с этим путем переключения className метки в зависимости от условия. Таким образом, вам понадобится только одна метка, и у вас могут быть разные классы для разных состояний ... Надеюсь, это поможет!