CSS如何使用伪类和伪类选择器（代码示例）

CSS中的伪类用于定义元素的特殊状态。可以将其与CSS选择器结合使用, 以根据其状态为现有元素添加效果。例如, 当用户将鼠标悬停在元素上或访问链接时, 更改元素的样式。所有这些都可以使用CSS中的伪类来完成。
注意伪类名称不区分大小写。
语法如下:

selector: pseudo-class{ property: value; }

CSS中有很多Pseudo类, 但是最常用的类如下:
:hover伪类:
【CSS如何使用伪类和伪类选择器（代码示例）】当我们的鼠标指针悬停在元素上时, 此伪类用于为元素添加特殊效果。下面的示例说明, 当鼠标进入框区域时, 其背景颜色从黄色变为橙色。
例子:

< !DOCTYPE html> < html > < head > < title > CSS transition-property property< / title > < style > .box{ background-color: yellow; width: 300px; height: 200px; margin: auto; font-size: 40px; text-align: center; }.box:hover{ background-color: orange; }h1, h2{ color: green; text-align: center; } < / style > < / head > < body > < h1 > Geeks For Geeks< / h1 > < h2 > :hover Pseudo-class< / h2 > < div class = "box" > My color changes if you hover over me! < / div > < / body > < / html >

输出如下:

文章图片
:active伪类:
该伪类用于选择一个元素, 该元素在用户单击时被激活。以下示例说明, 当你单击该框时, 其背景颜色会暂时改变。
例子:

< !DOCTYPE html> < html > < head > < title > CSS transition-property property< / title > < style > .box{ background-color: yellow; width: 300px; height: 200px; margin: auto; font-size: 40px; text-align: center; }.box:active{ background-color: orange; }h1, h2{ color: green; text-align: center; } < / style > < / head > < body > < h1 > Geeks For Geeks< / h1 > < h2 > :active Pseudo-class< / h2 > < div class = "box" > My color changes for a moment if you click me! < / div > < / body > < / html >

输出如下:

文章图片
:focus伪类:
该伪类用于选择用户当前关注的元素。它适用于表单中使用的用户输入元素, 并在用户单击它时立即触发。在下面的示例中, 当前聚焦的输入字段的背景颜色发生变化。
例子:

< !DOCTYPE html> < html > < head > < title > CSS transition-property property< / title > < style > form{ width: 300px; height: 200px; margin: 0 auto; text-align: center; line-height: 2rem; }label{ width: 30%; }input{ background-color: default; float: right; }input:focus{ background-color: grey; }h1, h2{ color: green; text-align: center; } < / style > < / head > < body > < h1 > Geeks For Geeks< / h1 > < h2 > :focus Pseudo-class< / h2 > < form > < label for = "username" > Username:< / label > < input type = "text" name = "username" placeholder = "Enter your username" /> < label for = "emailid" > Email-Id:< / label > < input type = "email" name = "emailid" placeholder = "Enter your email-id" /> < label for = "Password" > Password:< / label > < input type = "password" name = "Password" placeholder = "Enter your password" /> < / form > < / body > < / html >

输出如下:

文章图片
:visited伪类:
该伪类用于选择用户已经访问过的链接。在以下示例中, 链接的颜色在被访问后即会更改。
例子:

< !DOCTYPE html> < html > < head > < title > CSS transition-property property< / title > < style > body{ text-align: center; }h1, h2{ color: green; }a:visited{ color: red; } < / style > < / head > < body > < h1 > Geeks For Geeks< / h1 > < h2 > :visited Pseudo-class< / h2 > < p > < a href = "https://www.lsbin.org/" target = "_blank" > My color changes once you vist this link < / a > < / p > < / body > < / html >

输出如下: