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

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

Ссылка на сайт не упоминает, однако это whatwg spec (что бы это ни было).

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

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

Edit:

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

Невозможный флажок можно выбрать, используя псевдо-класс отрицания:

:not(:checked)

ОТВЕТЫ

Ответ 1

:unchecked не определен в спецификациях уровня 3 или 3, а также не отображается на уровне 4 селекторов.

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

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

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

Ответ 2

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

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

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

EDIT (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 должен был бы использовать border: none; для достижения такого же эффекта.

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

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

Ответ 3

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

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

Ответ 4

<style>

input, span {
  background: red;
}

:indeterminate, :indeterminate + span {
  background: limegreen;
}
</style>

</head>

<body>

<input type="checkbox"> <span>Everything in this paragraph should have a green background.</span>


<script type="text/javascript">
    document.getElementsByTagName("input")[0].indeterminate = true;
</script>

Ответ 5

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