Всем привет, добро пожаловать на сегодняшний курс фронтенда, я ваш фронтенд Лао Чжао. На предыдущем уроке мы узнали, как использовать селекторы CSS для выбора элементов HTML и применения стилей. Сегодня мы продолжим изучение еще одной важной темы CSS: псевдоклассы и псевдоэлементы.
При реальной разработке веб-сайтов нам часто нужно применять стили в соответствии с различными состояниями элементов. Например, когда пользователь наводит курсор на ссылку, мы хотим, чтобы цвет текста ссылки стал красным. Этот эффект требует использования псевдоклассов CSS. Псевдокласс — это ключевое слово, используемое для добавления специальных эффектов к определенным селекторам.
В дополнение к псевдоклассам у нас также есть псевдоэлементы, которые позволяют нам добавлять стили до или после содержимого элемента.
Псевдоклассы CSS:
Давайте сначала посмотрим на псевдоклассы CSS. Псевдоклассы CSS используются для стилизации элементов в зависимости от их состояния или содержимого. Вот некоторые часто используемые псевдоклассы CSS:
• :hover: применить стиль, когда указатель мыши находится над элементом.
• :active: применить стиль, когда элемент активирован (например, когда пользователь щелкает ссылку).
• :visited: применить стиль при посещении ссылки.
• :focus: применить стиль, когда элемент получает фокус (например, когда пользователь вводит текст в поле формы).
Эти псевдоклассы можно использовать в сочетании с другими селекторами, такими как:
CSS
a:hover{ color: red; }Это правило стиля означает следующее: при наведении указателя мыши на ссылку или абзац установите красный цвет текста ссылки или абзаца.
Псевдоэлементы CSS:
Теперь давайте посмотрим на псевдоэлементы CSS. Псевдоэлементы CSS используются для добавления стилей до или после содержимого элемента. Вот некоторые часто используемые псевдоэлементы CSS:
• ::before: вставляет некоторое содержимое перед содержимым элемента.
• ::после