Поскольку состояние меняется динамически, когда элемент достигает определенного состояния, он может получить стиль псевдокласса, при изменении состояния он потеряет этот стиль; Из этого видно, что его функция чем-то похожа на функцию класса, но она основана на абстракции вне документа, поэтому называется псевдоклассом.
Псевдокласс CSS — это специальный класс, который работает с селекторами CSS для создания определенных эффектов для выбранных тегов или элементов.
Синтаксис псевдокласса CSS: селектор: имя псевдокласса {атрибут: значение атрибута}
Наиболее часто используемый псевдокласс — это псевдокласс гиперссылок. Ссылки являются важной частью веб-сайта. Практически на каждой веб-странице можно увидеть множество ссылок. Разумный дизайн стилей ссылок может улучшить внешний вид веб-страницы. . точка. Ссылки имеют четыре разных состояния: ссылка, посещенное, активное и наведение. Вы можете установить разные стили для четырех состояний ссылки с помощью следующих селекторов псевдоклассов:
:link: Определить стиль непосещенных ссылок;
:visited: Определяет стиль посещаемых ссылок;
:hover: Определите стиль, когда мышь проходит или наводит курсор на ссылку;
:active: Определите стиль при нажатии на ссылку.
Пример:
<html><head></head><body><a>Тег href отсутствует, шрифт не изменяется, и при наведении на него мыши нет реакции</a></br>< ahref=#target=_blank>href — тег # по умолчанию синий и подчеркнутый. Когда вы наводите на него курсор мыши, он превращается в руку</a></br><ahref=https://www. .dotcpp.com/target=_blank>href — это тег URL-адреса. Эффект тот же, что и выше</a></body></html>
Результаты запуска:
(1): ссылка
Описание. Установите свойства таблицы стилей объекта перед обращением к нему.
Пример:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;mar gin-left:10px;background:#ccc;color:black;</style></head><body><ahref=''>Первая ссылка</a><ahref=''>Вторая ссылка</a </body></html>Результаты запуска:
(2):посещенный
Описание. Установите атрибут таблицы стилей объекта, который устарел на момент обращения к его адресу ссылки.
Пример:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ; color:black;}a:visited{background:#FFFF99;border:1pxsoildred;color:red;</style></head><body><ahref=''>Первая ссылка</a><ahref =' '>Вторая ссылка</a></body></html>Результаты запуска:
(3): наведите курсор
Описание: устанавливает свойства таблицы стилей объекта при наведении на него курсора мыши.
Пример:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;цвет:черный;}a:посетил{backgro und:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;</style></head><body><ahref=''>Нет . Одна ссылка</a><ahref=''>Вторая ссылка</a></body></html>Результаты запуска:
(4): активный
Описание. Установите свойства таблицы стилей объекта, когда он активируется пользователем (событие, которое происходит между щелчком мыши и отпусканием).
Пример:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;цвет:черный;}a:посещенный{фон:#FFFF99;граница:1pxsolidred ;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000;border:1pxsolidblack;color:white;</style></head> <body><ahref=''>Первая ссылка</a><ahref=''>Вторая ссылка</a></body></html>Результаты запуска:
Другой порядок определения CSS напрямую приведет к разным эффектам отображения ссылок. Причиной может быть «принцип близости», которому следуют браузеры при интерпретации CSS. Правильный порядок: a:ссылка, a:посещено, a:hover, a:активно.