Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Псевдо-классы
Скорее всего, вы уже знакомы с некоторыми псевдоклассами взаимодействия с пользователем, а именно :link:visited:hover:active
Важно: ключевые моменты для заметки
Существуют проблемы безопасности, которые может создавать псевдокласс :focus Без этих ограничений вредоносные сайты могут применять стиль к посещаемой ссылке, например, уникальное фоновое изображение для каждой посещенной ссылки, чтобы проверить, был ли пользователь посещен популярными сайтами или банками. Это позволяет злоумышленнику увидеть историю просмотров пользователя без его разрешения. В результате современные браузеры ограничивают стили, которые можно применять с помощью :visited
Спецификация явно одобряет эти изменения, говоря: UA [User Agent] могут, поэтому, рассматривать все ссылки как невидимые ссылки или реализовывать другие меры для сохранения конфиденциальности пользователя, в то же время по-разному отображая посещенные и не посещенные ссылки.
Для лучшей доступности добавьте :visited:focus
:hover
:hover:focus
Хотя вы, вероятно, уже некоторое время используете эти базовые псевдоклассы, доступно множество других. Некоторые из этих псевдоклассов были в спецификации в течение многих лет, но не были поддержаны (или общеизвестны), пока браузеры не начали поддерживать новые атрибуты формы HTML5, что сделало их более актуальными.
Следующие псевдоклассы сопоставляют элементы на основе атрибутов, взаимодействия с пользователем и состояния управления формой:
:active
Включенный элемент пользовательского интерфейса, который представляет собой любой элемент управления формой, который поддерживает атрибут :enabled
disabled
И наоборот, элемент пользовательского интерфейса, который :disabled
disabled:
Для переключателей или флажков, которые выбраны или отмечены.
:checked
Для элементов формы, которые не отмечены и не отмечены. Например, если вы отметите флажок флажок «все», чтобы выбрать группу флажков, а затем отмените выбор некоторых, но не всех флажков в группе, флажок «все» может быть установлен в неопределенное состояние (с JavaScript), чтобы указать, что он также не отмечен ни не проверено.
:indeterminate
Этот селектор выделяет элемент, который является целью текущей активной внутристраничной привязки. Это звучит сложнее, чем кажется: вы уже знаете, что можете иметь ссылки на якоря на странице, используя символ # с идентификатором цели. Например, на вашей странице может быть ссылка « Перейти к содержимому» , при нажатии на которую вы перейдете к элементу с идентификатором содержимого.
Это меняет URL-адрес в адресной строке на :targetthispage.html#contentand the Это как если бы вы временно включили селектор #content. Мы говорим временно, потому что, как только пользователь нажимает на другую привязку,: :target
:target
Применяется к одному или нескольким элементам пользовательского интерфейса, которые являются значениями по умолчанию среди набора похожих элементов. Например, один переключатель в группе одноименных переключателей, который был проверен при загрузке страницы, будет продолжать совпадать :default:default after another radio button in the same-named group is selected. Similarly, checkboxes that are selected on page load will continue to match :default
:valid
Применяется к допустимым элементам, основанным на типе, шаблоне или других входных атрибутах (как мы обсуждали в главе 4).
:invalid
Применяется к пустым обязательным элементам и элементам, не соответствующим требованиям, определенным атрибутами типа или шаблона.
:in-range
Применяется к элементам с ограничениями диапазона, где значение находится в этих пределах. Это относится, например, к типам ввода даты / времени, числа и диапазона с атрибутами min и max. Когда значение равно нулю, оно находится :in-range
:out-of-range
Противоположность :in-range: Недостающие значения не выходят за пределы диапазона, так как они пусты.
:required
Применяется к элементам управления формы, для которых установлен атрибут :required
:optional
Применяется ко всем элементам управления форм, которые не имеют атрибута :required
:read-only
Применяется к элементам, содержимое которых не может быть изменено пользователем. Это большинство элементов, отличных от тех, у которых установлен атрибут contenteditable
:read-write
Применяется к элементам, содержимое которых может изменяться пользователем, таким как contenteditable
Браузерная поддержка этих атрибутов завершена в браузерах, которые поддерживают атрибуты в своих элементах управления формой; другими словами, браузеры, которые поддерживают требуемый и шаблон, также поддерживают связанные псевдоклассы :valid:invalid
В IE8 и более ранних версиях отсутствует поддержка: selected,: enabled,: disabled и: target. Хорошей новостью является то, что IE9 поддерживает эти селекторы, но не селекторы пользовательского интерфейса. IE10 и IE11 поддерживают :indeterminate:required:optional:default:in-range:out-of-range:read-only:read-write
Хотя поддержка по-прежнему отсутствует, библиотеки JavaScript, такие как Selectivizr, могут помочь в нацеливании этих псевдоклассов в Internet Explorer.