Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Смотрите полный скринкаст и расшифровку псевдокласса :enabled здесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), начиная с буквы алфавита. Мы знаем, что иногда скринкастов просто недостаточно, в этой статье я добавил новый быстрый совет / урок о значении :enabled для вас.
E для :enabled
В CSS есть несколько псевдоклассов. Эти псевдоклассы помогают нам стилизовать различные состояния и нацеливать конкретные элементы на основе их отношения или положения к другим элементам. Элементы формы в стиле псевдоклассов :enabled и :disabled которые можно или нельзя заполнять или выбирать.
Псевдокласс :enabled можно использовать для optgroup включенного состояния элементов формы, таких как элементы button , input , optgroup , option , select и textarea . Элементы, которые могут иметь состояние :enabled также имеют соответствующее состояние :disabled .
Эти состояния устанавливаются логическим disabled атрибутом. Важно отметить, что атрибут «enabled» отсутствует, хотя существует псевдокласс :enabled .
<input type="text"/> <input type="text" disabled/>
Следовательно, эти элементы могут быть стилизованы либо их псевдоклассом, с помощью селектора атрибута, либо с помощью отрицательного селектора атрибута:
input:enabled { } input:not([disabled]) { } input:disabled { } input[disabled] { }
Там нет никакой реальной разницы между использованием любого из них; все они поддерживаются в IE9 + и имеют одинаковую специфику.
Я не уверен, как часто будут появляться эти селекторы, но интересно взглянуть на все разные способы решения одной и той же проблемы.