下面是一份结构清晰、适合整理为技术专栏或学习笔记的内容。📒
【H5 前端开发笔记】第 17 期：CSS 选择器 (2) —— 伪类选择器详解
在上一期中我们学习了 CSS 基础选择器（标签、类、ID）。
本期我们继续学习一种非常重要的选择器类型：
伪类选择器（Pseudo-class Selector）
伪类选择器用于 选择元素的特殊状态，例如：
- 鼠标悬停
- 点击状态
- 表单焦点
- 列表位置
这些状态通常 不需要 JavaScript 就可以实现交互效果。
一、什么是伪类选择器
伪类选择器使用 冒号 : 表示。
语法：
选择器:伪类 {
样式
}
示例：
a:hover{
color:red;
}
含义：
当鼠标移动到链接上时，文字变红
二、常见伪类选择器分类
CSS 伪类选择器主要包括：
| 类型 | 说明 |
|---|---|
| 链接伪类 | 控制超链接状态 |
| 交互伪类 | 鼠标与焦点状态 |
| 结构伪类 | 根据元素位置选择 |
| 表单伪类 | 表单控件状态 |
三、链接伪类选择器
链接伪类用于控制 超链接 <a> 的不同状态。
常见四种状态：
| 伪类 | 说明 |
|---|---|
:link | 未访问链接 |
:visited | 已访问链接 |
:hover | 鼠标悬停 |
:active | 鼠标点击 |
示例：
a:link{
color:blue;
}
a:visited{
color:purple;
}
a:hover{
color:red;
}
a:active{
color:green;
}
记忆顺序：
LVHA
link → visited → hover → active
这是 CSS 中的 经典顺序规则。
四、hover 伪类（最常用）
:hover 是最常见的伪类之一。
当鼠标移动到元素上时触发。
示例：
HTML：
<button>提交</button>
CSS：
button:hover{
background:orange;
}
效果：
- 鼠标移动到按钮上
- 按钮背景变成橙色
常见用途：
- 按钮效果
- 图片悬停
- 导航菜单
五、focus 伪类
:focus 用于 表单输入框获得焦点时。
示例：
HTML：
<input type="text">
CSS：
input:focus{
border:2px solid blue;
}
效果：
当输入框被点击时：
边框变蓝
常用于：
- 登录表单
- 搜索框
- 表单交互优化
六、结构伪类选择器
结构伪类根据 元素在父元素中的位置 进行选择。
1 first-child
选择 第一个子元素。
示例：
li:first-child{
color:red;
}
HTML：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
效果：
苹果 → 红色
2 last-child
选择 最后一个子元素。
li:last-child{
color:blue;
}
效果：
橙子 → 蓝色
3 nth-child
选择指定位置元素。
语法：
li:nth-child(数字)
示例：
li:nth-child(2){
color:green;
}
效果：
第二个 li 变绿色
七、nth-child 常见用法
奇数行
li:nth-child(odd){
background:#eee;
}
偶数行
li:nth-child(even){
background:#ccc;
}
表格斑马纹
tr:nth-child(even){
background:#f5f5f5;
}
效果：
表格行颜色交替
这种效果在后台管理系统非常常见。
八、not 伪类
:not() 用于排除某些元素。
示例：
p:not(.special){
color:gray;
}
含义：
选择所有 p，但不包含 class="special"
九、伪类选择器实际案例
示例：导航菜单
HTML：
<ul class="nav">
<li>首页</li>
<li>产品</li>
<li>关于</li>
</ul>
CSS：
.nav li{
display:inline-block;
padding:10px;
}
.nav li:hover{
background:#ddd;
}
效果：
鼠标移动到菜单项 → 背景高亮
十、开发中的常用伪类
在实际项目中最常用的伪类包括：
| 伪类 | 使用场景 |
|---|---|
:hover | 鼠标悬停效果 |
:focus | 输入框焦点 |
:nth-child() | 表格样式 |
:first-child | 第一个元素 |
:last-child | 最后元素 |
:not() | 排除选择 |
十一、本期总结
伪类选择器用于 选择元素状态。
语法：
选择器:伪类
常见伪类：
| 类型 | 示例 |
|---|---|
| 链接 | :link |
| 悬停 | :hover |
| 焦点 | :focus |
| 结构 | :nth-child() |
| 排除 | :not() |
作用：
- 实现交互效果
- 不需要 JavaScript
- 提高用户体验
下一篇我们继续学习：
第 18 期：CSS 选择器 (3) 伪元素选择器（::before / ::after / ::first-line / ::first-letter）
这是 CSS 高级样式技巧的核心内容之一，在很多企业项目中都会使用。🚀
