1. 《CSS伪类选择器：交互状态与行为控制机制》
1.1 什么是伪类选择器
- 1.1.1 核心定义
👉 用于描述元素的状态变化（不是元素本身） - 1.1.2 本质理解
👉 选择的是“状态”，不是“元素”
1.2 hover（最常用）
- 1.2.1 写法
div:hover {
background-color: skyblue;
}
- 1.2.2 作用
👉 鼠标移动到元素上触发
- 1.2.3 示例（结合文档）
div {
width: 300px;
height: 300px;
background-color: pink;
}
div:hover {
background-color: skyblue;
cursor: no-drop;
}
- 1.2.4 关键点
- 可以改变颜色、大小、透明度等
- 可以设置鼠标样式（cursor）
1.3 cursor（鼠标样式）
- 1.3.1 常见值
cursor: pointer; /* 小手 /
cursor: no-drop; / 禁止 /
cursor: text; / 文本 */
- 1.3.2 实战作用
- 按钮提示（pointer）
- 禁止操作（no-drop）
1.4 focus（获取焦点）
- 1.4.1 写法
input:focus {
background-color: yellow;
color: blue;
}
- 1.4.2 作用
👉 输入框被点击时触发
- 1.4.3 示例
👉 点击输入框 → 样式变化
1.5 a标签伪类（重点）
1.5.1 四种状态
:link（未访问）:visited（访问过）:hover（鼠标悬停）:active（点击瞬间）
1.5.2 顺序规则（必须记）
link → visited → hover → active
👉 简记：lvha（顺序不能乱）
1.5.3 示例
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}
1.6 去掉a标签默认样式
a {
text-decoration: none;
font-weight: 700;
font-family: ‘华文仿宋’;
}
- 作用
- 去掉下划线
- 自定义样式
2. 本章核心总结（必须掌握）
2.1 核心能力
你必须能做到：
- 会写
:hover - 会写
:focus - 知道 a 标签四种状态
- 记住 lvha 顺序
2.2 最常用两个
:hover→ 做交互效果:focus→ 表单高亮
2.3 高频面试点
- 为什么 lvha 顺序不能乱？
👉 后写的会覆盖前面的（层叠性）
2.4 实战应用场景
- 按钮悬停变色
- 图片缩放效果
- 输入框高亮
- 鼠标样式提示
2.5 一句话总结
👉 伪类选择器 = 控制“元素状态变化”的工具