:hover用于鼠标悬停时样式，如链接变色；2. :active定义元素被激活时效果，如按钮按下变暗；3. :focus在元素获焦点时生效，提升可访问性，如输入框高亮边框；三者结合使用可增强交互反馈，使界面更友好、响应更直观。
在网页设计中，:hover、:active 和 :focus 是最常用的 CSS 伪类选择器，它们能提升用户交互体验。通过为元素设置不同状态的样式，可以让用户更清楚地感知操作反馈。
1. :hover —— 鼠标悬停时的样式
当用户将鼠标指针移到元素上时，:hover 生效。常用于按钮、链接等可交互元素。
例如，让链接文字在悬停时变红：
a:hover {
color: red;
}
也可以配合其他元素使用，比如导航菜单项背景变色：
立即学习“前端免费学习笔记（深入）”；
.nav-item:hover {
background-color: #f0f0f0;
}
2. :active —— 元素被激活时的样式
:active 表示元素正在被点击（鼠标按下但未释放）的状态，通常用于按钮或链接按下瞬间的效果。
例如，点击按钮时让它看起来“被按下”：
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
button:active {
background-color: #005bb5;
transform: scale(0.98);
}
这个状态是临时的，松开鼠标后样式消失。
3. :focus —— 元素获得焦点时的样式
当用户通过 Tab 键或鼠标点击使表单元素（如 input、textarea、button）获得焦点时，:focus 生效。对可访问性非常重要。
比如输入框获得焦点时添加蓝色边框：
input:focus {
border-color: blue;
outline: 2px solid #007bff;
}
</font>
注意：不要随意移除 outline，否则会影响键盘用户的操作体验。若要自定义，可用 outline 替代方案。
组合使用提升交互效果
多个伪类可以结合使用，实现更细腻的反馈。例如一个按钮同时设置三种状态：
.btn {
background: #007bff;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}
.btn:hover {
background: #0056b3;
}
.btn:active {
background: #004085;
}
.btn:focus {
outline: 2px solid #005eff;
outline-offset: 2px;
}
这样用户无论是用鼠标悬停、点击，还是用键盘切换焦点，都能看到清晰的视觉反馈。
基本上就这些。合理使用 :hover、:active 和 :focus，能让页面更友好、更具响应感。关键是保持样式自然，不干扰内容，同时兼顾可访问性。不复杂但容易忽略。
