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

108

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

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

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

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

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

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

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

css css-selectors pseudo-class

— Веб-дизайнер
источник

104

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

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

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

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

— BoltClock
источник

Просто чтобы добавить к этому ответу, что selection: not (: checked) отлично работает в Chrome, но не в IE (проверено на 9 и 11).

— Бруно Фингер,

@Bruno Finger:: checked и: not (: checked) оба должны работать в IE, за исключением того, что оба они в равной степени подвержены ошибке, при которой изменение состояния проверки не обновляет стили целевых элементов по отношению к отмеченным / не отмеченным элемент.

— BoltClock

35

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

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)для явных неотмеченных стилей, которые вы не хотите применять к отмеченному состоянию.

— Майкл Страмел
источник

Есть и другие варианты использования селекторов css, где они полезны / выразительны: javascript, автоматическое тестирование браузера

— nruth

2

Это не всегда возможно. Элементы формы, в частности, печально известны тем, что не позволяют вам вернуть им внешний вид по умолчанию с помощью правил каскадирования. (Хотя почему кто-то захочет придать только отмеченным или только непроверенным входам индивидуальный внешний вид, оставляя другой монетный двор, мне не по силам.)

— BoltClock

Другой случай, когда это невозможно: более двух переключателей. Например, вам может понадобиться один стиль, когда опция №1: отмечена, и другой, когда все остальное: отмечено. Решение:not(:checked)

— Navin

Если вы были желая только желающие конкретные из них стиля, почему бы не использовать :first-child, :last-childили :nth-childселектор в сочетании с :checked. :not(:checked)не будет охватывать указанную вами ситуацию, если я не понимаю ваш комментарий.

— Майкл Страмел

@MichaelStramel устанавливает порядок htmls в CSS? нет, спасибо

— inetphantom

3

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

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

— Джефф Вуден
источник

-2

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

— Дэниел Рам
источник