Можно сказать, что роль селекторов псевдоклассов в CSS является решающей. Если в CSS нет селекторов псевдоклассов, многие эффекты придется выполнять с помощью js. Это не только увеличит объем кода, но и уменьшит производительность. его сложно поддерживать. Такая большая нагрузка на программистов также противоречит цели CSS, которая заключается в повышении эффективности разработки и обеспечении более высокого качества разработки в одном и том же мире.
Селекторы псевдоклассов включают селекторы объектов псевдоклассов и псевдоклассов, в которых в качестве идентификатора префикса используется двоеточие (:). Вы можете добавить селектор перед двоеточием, чтобы ограничить область применения псевдокласса. После двоеточия указываются имена псевдоклассов и объектов псевдоклассов. До и после двоеточия нет пробелов, в противном случае оно будет считаться. селектор классов, как показано на рисунке.
В следующей таблице содержится большинство селекторов псевдоклассов:
Динамический псевдокласс
Динамические псевдоклассы — это тип поведенческих стилей. Эти стили не существуют в HTML и могут отображаться только при взаимодействии пользователей со страницей. Селекторы псевдоклассов динамических псевдоклассов включают две формы:
Псевдокласс привязки, который является наиболее распространенным стилем ссылок, например :link, :visited.
Псевдоклассы поведения также называются псевдоклассами пользовательских операций, например :hover, :active и :focus.
Для простоты обучения я пишу его как встроенный. В реальных приложениях не рекомендуется использовать встроенный.
:связь
Перед переходом установите стиль гиперссылки. Использование следующее:
<ahref=#target=_blank>Прыжок</a>
Если вы хотите, чтобы стиль перед гиперссылкой выше имел красный цвет шрифта без подчеркивания, вы можете установить его следующим образом.
:посетил
Этот псевдокласс является полной противоположностью :link: :link — это стиль перед ссылкой, а :visited — это стиль после ссылки, то есть стиль гиперссылки после посещения.
<ahref=#target=_blank>Прыжок</a>:li
При ежедневном обучении каждый может писать ссылки до и после них вместе, что удобно, быстро и семантично, что приводит к тому, что многие студенты не знают, что эти два псевдокласса имеют эффект покрытия; Следующие примеры помогут вам получить общее представление:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; text-decoration:underline;</style></head><body><ahref=login.htmltarget=_blank>Jump</a></body></html>Приведенный выше код представляет собой ссылку перехода со страницы HTML на страницу входа в систему. Отрисовка после запуска выглядит следующим образом:
:наведите курсор
Селектор псевдокласса :hover используется для стилизации эффектов, когда пользователь наводит указатель мыши на элемент. Он используется не только для гиперссылок, но также может применяться ко многим элементам, например кнопкам. Когда вы наведете на него указатель мыши, вы обнаружите, что северный цвет фона кнопки становится темнее или меняет цвет. Это делается с помощью наведения курсора мыши. Конечно, есть и другие способы его настройки, но сомнений нет: наведение — самый простой и быстрый способ. Здесь я сначала представлю методы использования гиперссылок, а затем расширю их и буду использовать для изменения эффекта после наведения мыши на элемент.
Если вы хотите, чтобы цвет элемента менялся при наведении курсора мыши на элемент тега, код выглядит следующим образом:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;</style></head><body><ahref= #target=_blank>Прыжок</a></body></html> 
Расширять
Код структуры следующий:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;}</style></head><body><div>:hover</div></body></html>Когда желаемый эффект заключается в том, что при наведении курсора мыши на элемент div цвет фона меняется на черный, а шрифт — на белый. Код выглядит следующим образом:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:o range;text-align:center;transition:all1s;}div:hover{background:black;color:white;</style></head><body><div>:hover</div></body> </html>:активный
:active используется для эффектов стиля, когда пользователь нажимает на элемент. Чаще всего он используется в элементах управления формой. Когда пользователь щелкает мышью, это вызывает эффект нажатия кнопки. По той же причине я поместил это в область расширения.
При нажатии на гиперссылку я хочу изменить цвет шрифта гиперссылки. Код реализации выглядит следующим образом:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;</style></head ><body><ahref=#target=_blank>Прыжок</a></body></html>Расширять
В этом примере используется элемент div для имитации кнопки. Стиль кнопки, поставляемый с HTML, сложно описать одним словом. Его легко имитировать и контролировать.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;background :зеленый;размер шрифта:24p x;font-weight:bold;border-radius:15px;margin:150pxauto;курсор:указатель;}div:active{background:оранжевый;цвет:белый;</style></head><body><div> кнопка</div></body></html>:фокус
:focus используется для стилизации эффекта, когда многоцелевой элемент становится фокусом. Это часто используется в элементах управления формой.
Код структуры:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ тело></html>
Если вы хотите, чтобы ввод получил фокус, цвет фона — #CCC, а код реализации:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;</style></head><body><formaction =#method=post><inputtype=text></form></body></html>Вы можете увидеть эффект изменения цвета фона на целевой цвет после того, как ввод получает фокус.
Что следует отметить:
(1) Вышеупомянутый селектор псевдокласса следует принципу порядка, то есть ссылка на посещенный объект наводится курсором мыши, а затем на активный псевдокласс.
(2) Наведение и активный режим включены в псевдокатегорию поведения пользователя.
первенец
Первый дочерний псевдокласс может соответствовать первому дочернему элементу указанного родительского элемента. Например, ul li:first-child может соответствовать первому элементу <li> элемента <ul>. Пример кода выглядит следующим образом:
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*Соответствует первому тегу <li> в <ul>*/color:red;</style></head>< body> <ul><li>Программирование dotcpp</li><li>Программирование dotcpp</li><li>Программирование dotcpp</li></ul></body></html>Результаты запуска:
аст-ребёнок
Подобно первому дочернему элементу, последний дочерний псевдокласс может соответствовать последнему дочернему элементу указанного родительского элемента. Например, ul li:last-child может соответствовать последнему элементу <li> в элементе <ul>. пример кода выглядит следующим образом:
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*Соответствует последнему тегу <li> в <ul>*/color:red;</style></head><body > <ul><li>Программирование dotcpp</li><li>Программирование dotcpp</li><li>Программирование dotcpp</li></ul></body></html>Результаты запуска:
n-й ребенок
Псевдокласс nth-child является новым в CSS3. Он может соответствовать n-му дочернему элементу указанного элемента. Например, ul li:nth-child(2) может соответствовать второму элементу <li> элемента <ul>. Пример кода выглядит следующим образом:
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*Соответствует второму тегу <li> в <ul>*/color:red;</style></ head> <body><ul><li>Программирование dotcpp</li><li>Программирование dotcpp</li><li>Программирование dotcpp</li></ul></body></html>Результаты запуска:
