- A+
伪类和伪元素是CSS中非常实用的特性，它们帮助开发者在不改变HTML结构的前提下，为特定状态或内容片段添加样式。虽然名字相似，但两者用途和语法略有不同。下面详细介绍常用伪类与伪元素的使用方法。
:hover 伪类 —— 鼠标悬停时触发样式
当用户将鼠标指针移动到某个元素上时，:hover 会激活对应样式，常用于按钮、链接等交互元素。
示例：
a:hover { color: red; }
这会让链接在鼠标悬停时变为红色。
不仅限于链接，任何元素都可以使用 :hover，比如高亮整个卡片区域或显示隐藏内容。
:focus 伪类 —— 元素获得焦点时生效
当用户通过键盘Tab键或点击使表单元素（如 input、button）获得焦点时，:focus 被触发，有助于提升可访问性。
立即学习“前端免费学习笔记（深入）”；
示例：
input:focus { border-color: blue; outline: none; box-shadow: 0 0 5px blue; }
这样可以让用户清楚地看到当前正在操作的输入框。
::before 和 ::after 伪元素 —— 插入装饰性内容
这两个伪元素允许你在元素内容前或后插入生成的内容，常用于添加图标、引号、清除浮动等。
关键点：
- 必须设置
content属性，即使为空（content: ""） - 默认为行内元素，可通过 display 修改
- 不能选中或复制生成的内容，仅用于视觉展示
示例：
p::before { content: "▶ "; color: gray; }
每个段落前都会出现一个灰色箭头符号。
:nth-child(n) 与 :nth-of-type(n) —— 精准定位子元素
用于选择父元素下的第n个子元素，适合实现隔行变色、布局控制等。
国内首个全链路营销获客AI Agent
172
查看详情
区别说明：
- :nth-child(2) 选择的是父元素下的第二个子节点，不管类型
- :nth-of-type(2) 只计算同类型的元素，比如第二个 p 标签
常见用法：
tr:nth-child(even) { background: #f2f2f2; }
实现表格隔行着色。
::first-line 与 ::first-letter —— 文本排版利器
主要用于段落的首行或首字母样式设计，常见于文章页面。
示例：
p::first-letter { font-size: 2em; float: left; margin-right: 5px; }
实现首字母下沉效果。
p::first-line { font-weight: bold; }
让段落首行加粗。
注意：
这些伪元素只能应用于块级元素，且仅对第一个格式化行或字母起作用。
:not() 伪类 —— 排除特定元素
选择不符合指定条件的元素，增强选择器灵活性。
示例：
div:not(.special) { opacity: 0.8; }
所有不包含 class="special" 的 div 都会应用半透明效果。
支持多种参数，如标签名、属性选择器等，提高筛选精度。
总结：伪类 vs 伪元素
伪类以单冒号表示（如 :hover），描述元素的特殊状态；伪元素使用双冒号（如 ::before），代表文档中不存在的抽象元素。
CSS3规范推荐伪元素使用双冒号以区分伪类，但为了兼容旧浏览器，单冒号仍被广泛接受。
合理使用这些特性，能减少冗余HTML标签，让代码更简洁，样式更动态。
