2.1 伪类 :hover
状态伪类允许根据用户的交互或当前状态为元素应用样式。这些伪类常用于改善用户界面，提供用户操作的视觉反馈。
伪类 :hover 应用于当用户将鼠标悬停在元素上时。
语法：
选择器:hover {
属性: 值;
}
示例：
在这个例子中，链接在鼠标悬停时改变颜色并添加下划线，而按钮改变背景色和文字颜色。
CSS
/* 鼠标悬停时链接的样式 */
a:hover {
color: red;
text-decoration: underline;
}
/* 鼠标悬停时按钮的样式 */
button:hover {
background-color: #3498db;
color: white;
}
2.2 伪类 :focus
伪类 :focus 应用于元素获得焦点时，例如点击表单元素或通过 Tab 键切换到该元素时。
语法：
选择器:focus {
属性: 值;
}
示例：
在这个例子中，输入框在获得焦点时改变边框颜色并移除轮廓，而文本区域改变背景颜色。
CSS
/* 焦点状态下输入框的样式 */
input:focus {
border-color: blue;
outline: none;
}
/* 焦点状态下文本区域的样式 */
textarea:focus {
background-color: #f0f0f0;
}
2.3 伪类 :active
伪类 :active 应用于元素被用户激活时，例如鼠标按下按钮时。这个伪类常用于在用户点击界面元素时创建视觉反馈。
语法：
选择器:active {
属性: 值;
}
示例：
在这个例子中，链接在按下时改变颜色，而按钮改变背景色并稍微缩小，创造按下的效果。
CSS
/* 按下时链接的样式 */
a:active {
color: green;
}
/* 按下时按钮的样式 */
button:active {
background-color: #2980b9;
transform: scale(0.98);
}
2.4 伪类 :visited
伪类 :visited 应用于用户已访问的链接。它可以让访问过的链接与未访问的链接样式不同。
语法：
选择器:visited {
属性: 值;
}
示例
在这个例子中，访问过的链接将颜色变为紫色，以区别于未访问的链接：
CSS
/* 访问过的链接的样式 */
a:visited {
color: purple;
}
2.5 组合伪类
状态伪类可以组合使用以创建复杂的交互样式。例如，可以为不同状态的链接指定不同的样式。
完整实现示例
在这个例子中，根据链接的状态改变样式：基础状态，访问过的链接，悬停的链接和按下的链接：
CSS
/* 链接的基础样式 */
a {
color: blue;
text-decoration: none;
}
/* 访问过的链接的样式 */
a:visited {
color: purple;
}
/* 悬停状态下链接的样式 */
a:hover {
color: red;
text-decoration: underline;
}
/* 按下时链接的样式 */
a:active {
color: green;
}
GO TO FULL VERSION