一、hover伪类
hover伪类是最为人熟知的伪类。通过在样式表中应用:hover选择器，可以为某个元素在鼠标悬浮时设置样式。这可以让用户更加直观地了解自己正在与哪个元素交互。
下面是一个例子，当鼠标悬浮在超链接上时，将其文字内容变色：
a:hover {
color: #ff0000;
}
二、nth-child伪类
nth-child伪类允许您选择并样式化一组中的每个子元素。您可以使用:nth-child规则结合数字参数来选取子元素。这对于基于网格的布局和具有相同样式的操作非常有用。
下面是一个例子，将清单中的每个第二个列表项的颜色更改为淡蓝色：
ul li:nth-child(2n) {
color: #3498db;
}
三、visited伪类
visited伪类可以为先前已访问的链接元素设置样式。这对于确保用户知道自己已访问哪些链接非常有用。
下面是一个例子，当用户访问过链接时，链接的颜色将更改为浅灰色：
a:visited {
color: #ccc;
}
四、focus伪类
focus伪类可以为当前拥有输入焦点的元素（例如input文本框）设置样式。这对于提高页面的可访问性非常有用，因为它确保了有限的键盘用户可以轻松地导航页面中的元素。
下面是一个例子，当用户选择输入文本框时，文本框将以灰色边框呈现：
input:focus {
border: 1px solid #ccc;
}
五、checked伪类
checked伪类用于选择被选中的输入元素，例如单选按钮和复选框。这对于在表示用户选择时为元素提供视觉反馈非常有用。
下面是一个例子，当用户选择单选按钮时，该按钮将呈现为粗体：
input[type="radio"]:checked {
font-weight: bold;
}
六、active伪类
active伪类可以用于为处于活动状态或被点击但未释放的元素设置样式。这对于为用户提供清晰、立即响应的反馈非常有用。
下面是一个例子，当用户点击按钮时，按钮将在按下时变为深灰色：
button:active {
background-color: #444;
}
原创文章，作者：YXHU，如若转载，请注明出处：https://www.506064.com/n/132937.html
微信扫一扫 
支付宝扫一扫 