CSS伪类通过冒号语法定义元素特殊状态，如:hover实现悬停效果、:focus处理聚焦样式、:active响应激活状态、:visited和:link区分链接访问情况，结合结构性伪类:first-child、:nth-child(n)及表单伪类:checked、:disabled、:required、:valid/:invalid，可在无需JavaScript情况下提升交互体验；使用时需注意LVHA顺序、避免滥用、考虑兼容性与优先级冲突。
CSS 伪类用于定义元素的特殊状态，比如鼠标悬停、链接点击、元素聚焦等。它不是通过 HTML 结构决定的，而是基于用户行为或元素在文档中的位置来触发样式变化。伪类使用冒号（:）语法添加到选择器后面，是实现交互效果的重要手段。
常用基础伪类及其作用
以下是一些最常用的 CSS 伪类，适用于大多数网页开发场景：
• :hover：当用户将鼠标指针悬停在元素上时应用样式。常用于按钮、链接等可交互元素。• :focus：当元素获得焦点（如输入框被点击或通过 Tab 键选中）时生效。对表单元素特别有用。
• :active：元素被激活时（例如鼠标按下但未释放）触发。适合模拟“按下”效果。
• :visited：仅适用于超链接（a 标签），表示该链接已被访问过。
• :link：匹配所有未被访问的链接。
示例代码：
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
}
input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
结构性伪类选择器
这类伪类根据元素在父容器中的位置来选择，无需额外类名即可精准定位子元素：
立即学习“前端免费学习笔记（深入）”；
• :first-child：选中作为父元素第一个子元素的指定元素。• :last-child：选中最后一个子元素。
• :nth-child(n)：匹配第 n 个子元素，n 可为数字、关键字或公式（如 2n+1 表示奇数项）。
• :nth-of-type(n)：与 nth-child 类似，但只计算同类标签。
举例说明：
li:first-child {
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
p:nth-of-type(2) {
color: #d9534f;
}
表单相关伪类
现代 Web 开发中，表单验证和用户体验优化离不开这些伪类：
• :checked：匹配被选中的单选按钮、复选框或下拉选项。• :disabled：选中被禁用的表单元素。
• :required：匹配设置了 required 属性的输入框。
• :valid / :invalid：分别匹配通过或未通过验证的输入内容。
实用示例：
input:disabled {
background-color: #eee;
color: #666;
}
input:required {
border-left: 3px solid red;
}
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
伪类使用注意事项
虽然伪类功能强大，但使用时需注意以下几点以避免常见问题：
• 顺序很重要：对于链接状态，推荐遵循 LVHA 顺序 —— :link → :visited → :hover → :active，否则某些样式可能被覆盖。• 不要滥用：过多的 hover 或 focus 效果会影响可读性和性能。
• 兼容性考虑：部分较新的伪类（如 :is(), :where()）在旧浏览器中不支持，需结合实际情况使用。
• 避免冲突：结构性伪类与类选择器混用时，注意优先级问题，必要时可通过提高特异性解决。
基本上就这些。掌握这些基础伪类，能显著提升页面的交互表现力和维护效率。合理运用，让样式更智能、更贴近用户操作。
