CSS伪类样式例子：让你的网页交互更生动

常见的CSS伪类及其用法

在日常做网页设计时，经常会遇到需要根据元素状态来改变样式的场景。比如按钮被鼠标悬停时变色，链接点击后恢复默认颜色，表单输入框获得焦点时加边框——这些都可以用CSS伪类轻松实现。

伪类的核心是“动态状态”，它不像普通选择器只选中某个元素，而是选中元素在特定时刻的状态。

:hover —— 鼠标悬停效果

这是最常用的一个伪类。当用户把鼠标移到某个元素上时触发样式变化。

.btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #0056b3;
}

上面的例子中，按钮默认是蓝色，鼠标移上去变成深蓝，加上过渡动画显得更自然。

:focus —— 获取焦点时的样式

当用户点击输入框或使用Tab键导航时，输入框会“获得焦点”。通过:focus可以高亮当前正在操作的字段。

input[type="text"]:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.4);
}

这样用户填写表单时能清楚知道自己正在填哪一项，提升体验。

:nth-child() —— 精准控制列表样式

做表格或列表时，经常想让奇数行和偶数行颜色不同。用:nth-child(even)和:nth-child(odd)就能快速实现斑马条纹。

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(odd) {
  background-color: #ffffff;
}

这种视觉区分让长数据表格更容易阅读，尤其在财务报表、后台管理页面中很实用。

:first-child 和 :last-child

如果你想给一组同类元素中的第一个或最后一个特殊处理，这两个伪类就派上用场了。

li:first-child {
  font-weight: bold;
}

li:last-child {
  color: red;
}

比如一个导航菜单，把“首页”加粗，把“退出登录”标红，用户一眼就能识别关键项。

:not() —— 排除特定元素

有时候你想对“除了某个例外”的所有元素应用样式，这时候:not()就很方便。

p:not(.intro) {
  font-size: 14px;
  color: #555;
}

上面这段代码会让所有不是 class=intro 的段落使用小字号和灰色文字，而保留介绍段落的大字号或强调样式。

:visited —— 控制已访问链接的颜色

默认情况下，点过的链接会变成紫色。你可以自定义这个颜色，但出于安全考虑，浏览器限制了可设置的属性范围。

a:visited {
  color: purple;
}

适合用于内容型网站，让用户知道哪些文章已经读过。

实际应用场景

假设你在做一个内部办公系统，员工要频繁查看通知列表。用 li:nth-child(n+6):not(.urgent) 可以把第6条之后且非紧急的通知变灰，帮助用户优先处理重要信息。

又或者，在提交表单前，用 input:invalid 配合表单验证，实时提示错误：

input:invalid {
  border: 2px solid #dc3545;
}

这些细节虽小，但积少成多，能让整个界面更友好、更高效。