🎨 CSS 伪类与伪元素完全指南

✍️ 作者：桑榆
🕓 更新时间：2025-11-01
🧠 关键词：minix

🧩 前言

写的按钮组件会带点动画效果，比如 hover 时会有个 opacity 变化。 还有 focus 时会有个 outline 变化。 这里就用到了伪类和伪元素。这篇文章会详细介绍伪类和伪元素的使用。

一、基本概念

🧩 什么是伪类（Pseudo-class）

伪类 表示元素处于某种状态时所应用的样式。 它并不会在 HTML 中直接出现，而是根据用户交互、文档结构或元素特征动态匹配。

📘 简单理解：

“伪类 = 元素的状态”。

例如：

a:hover { color: red; } /* 当鼠标悬停时变红 */

🧱 什么是伪元素（Pseudo-element）

伪元素 用于选中元素的某个特定部分（如首字母、首行、内容前后等）。 它实际上会在视觉上生成一个虚拟元素。

📘 简单理解：

“伪元素 = 元素的子部分”。

例如：

p::first-line { font-weight: bold; } /* 段落的首行加粗 */
p::before { content: "👉 "; }         /* 在段落前插入图标 */

二、伪类与伪元素的区别

对比项	伪类（:）	伪元素（::）
含义	表示元素的状态	表示元素的部分
是否生成新元素	否	是（视觉上）
语法符号	:	::
作用对象	整个元素	元素的内容或子区域
示例	:hover, :focus, :nth-child()	::before, ::after, ::first-letter

💡 CSS2 中伪元素曾用单冒号（如 :before），CSS3 后标准改为双冒号 ::，但浏览器兼容两种写法。

三、常见伪类分类与示例

1. 🧭 动态伪类（用户交互）

伪类	说明
:hover	鼠标悬停时
:active	鼠标点击时
:focus	获取焦点时（输入框）
:visited	链接被访问过
:link	未访问的链接
:focus-visible	可见焦点（键盘导航时）

示例：

button:hover {
  background-color: #007bff;
  color: white;
}

2. 🧩 结构性伪类（基于文档结构）

伪类	说明
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(n)	第 n 个子元素
:nth-of-type(n)	同类型中的第 n 个
:not(selector)	排除匹配项
:empty	没有内容的元素
:only-child	唯一子元素

示例：

li:nth-child(odd) { background: #f8f8f8; }
li:first-child { font-weight: bold; }

3. ✅ 状态与表单伪类

伪类	说明
:checked	选中的复选框或单选框
:disabled	被禁用的表单元素
:enabled	可用的表单元素
:valid	通过验证的输入
:invalid	验证失败的输入
:required	必填字段
:read-only	只读状态
:placeholder-shown	显示占位符时

示例：

input:focus {
  border-color: #4a90e2;
}

input:invalid {
  border-color: red;
}

4. 🌈 其他特殊伪类

伪类	说明
:root	文档根元素（HTML 中即 ）
:target	当前 URL 片段匹配的元素（如锚点）
:lang()	指定语言的元素
:is(), :where()	简化选择器组合
:has()	父选择器（CSS4 新增）

示例：

:root {
  --primary-color: #007bff;
}
a:target {
  background: yellow;
}

四、常见伪元素与示例

伪元素	说明	示例
::before	在元素内容前插入内容	p::before { content: "123"; }
::after	在元素内容后插入内容	p::after { content: "123"; }
::first-letter	选中首字母	p::first-letter { font-size: 2em; }
::first-line	选中首行	p::first-line { font-weight: bold; }
::selection	用户选中文本时	::selection { background: yellow; }
::marker	列表项前的符号	li::marker { color: red; }
::placeholder	输入框占位符文本	input::placeholder { color: #aaa; }
::backdrop	全屏元素后背景（如 dialog）	dialog::backdrop { background: rgba(0,0,0,0.5); }

五、伪类与伪元素结合应用（实战）

🔘 按钮状态样式（结合伪类）

button {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);

  &:hover { opacity: 0.9; }
  &:focus { outline: none; box-shadow: 0 0 0 2px #007bff44; }
  &:disabled { cursor: not-allowed; opacity: 0.5; }
}

✨ 添加图标或修饰（伪元素）

.btn::before {
  content: "🚀 ";
}

.btn::after {
  content: " →";
}

六、推荐组合技巧（实战示例）

button {
  @include button-style();
  position: relative;

  // 添加动画伪元素
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    opacity: 0;
    transition: opacity .3s;
  }

  &:hover::after {
    opacity: 1;
  }
}