伪类和伪元素

在 CSS 中，伪类（Pseudo-class） 和 伪元素（Pseudo-element） 是两种不同的概念，但常常被混淆。本文将详细解析它们的区别、使用方式和常见的应用场景。

---

伪类（Pseudo-class）

什么是伪类？

伪类用于 选择特定状态下的元素，比如：

• 鼠标悬停 时 (:hover)
• 元素被选中 (:focus)
• 列表中的第一个或最后一个子元素 (:first-child, :last-child)
• 表单验证状态 (:valid, :invalid)

伪类 不会创建新元素，只是选择处于某种特殊状态的已有元素。

伪类的语法

selector:pseudo-class {
    property: value;
}

---

常见的伪类

伪类	作用	示例
:hover	鼠标悬停时	button:hover { background: yellow; }
:focus	获取焦点时	input:focus { border: 2px solid blue; }
:first-child	选中 父级的第一个子元素	p:first-child { font-weight: bold; }
:last-child	选中 父级的最后一个子元素	p:last-child { color: red; }
:nth-child(n)	选中第 n 个子元素	li:nth-child(2) { color: blue; }
:nth-of-type(n)	选中某种类型的第 n 个元素	p:nth-of-type(3) { color: green; }
:only-child	选中唯一的子元素	div:only-child { background: pink; }
:not(selector)	排除 某个选择器	p:not(.special) { color: gray; }
:checked	选中 复选框/单选按钮	input:checked { outline: 2px solid green; }
:disabled	选中 禁用的表单元素	button:disabled { opacity: 0.5; }

伪类示例

/* 鼠标悬停时按钮变色 */
button:hover {
    background-color: lightblue;
}

/* 选中 <ul> 中的第一个 <li> */
ul li:first-child {
    color: red;
}

/* 选中表单中被选中的复选框 */
input:checked {
    border: 2px solid green;
}

/* 选中所有不是 .special 的 <p> */
p:not(.special) {
    color: gray;
}

🔹 示例 HTML

<button>悬停我</button>

<ul>
    <li>第 1 个</li>
    <li>第 2 个</li>
    <li>第 3 个</li>
</ul>

<input type="checkbox" checked> 选中状态
<input type="checkbox"> 未选中

---

伪元素（Pseudo-element）

什么是伪元素？

伪元素用于 选中元素的一部分，如：

• 第一个字母 (::first-letter)
• 第一行文本 (::first-line)
• 在元素前/后插入内容 (::before, ::after)

伪元素 会创建一个新的虚拟元素，并应用样式。

伪元素的语法

selector::pseudo-element {
    property: value;
}

注意：CSS3 规范要求 伪元素使用双冒号 ::，但早期版本中可以使用 :（兼容性问题）。

---

常见的伪元素

伪元素	作用	示例
::before	在元素 前 添加内容	p::before { content: "📌 "; }
::after	在元素 后 添加内容	p::after { content: " ✅"; }
::first-letter	选中文本的 第一个字母	p::first-letter { font-size: 2em; color: red; }
::first-line	选中文本的 第一行	p::first-line { color: blue; }
::selection	选中文本时的样式	::selection { background: yellow; color: black; }

伪元素示例

/* 在 <p> 元素前插入图标 */
p::before {
    content: "📌 ";
    color: blue;
}

/* 在 <p> 元素后插入文本 */
p::after {
    content: " ✅";
    color: green;
}

/* 让段落的第一个字母变大 */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: red;
}

/* 让段落的第一行变色 */
p::first-line {
    color: blue;
}

/* 选中文本时改变背景色 */
::selection {
    background: yellow;
    color: black;
}

🔹 示例 HTML

<p>这是一个段落，用来演示伪元素。</p>

效果：

• ::before 在段落前 添加 📌 图标
• ::after 在段落后 添加 ✅
• ::first-letter 使第一个字母变大、变红
• ::first-line 第一行变蓝
• ::selection 选中时变黄

---

伪类 vs. 伪元素

对比	伪类（Pseudo-class）	伪元素（Pseudo-element）
作用	选中特殊状态的元素	选中元素的一部分
是否创建新元素	❌ 不创建新元素	✅ 创建虚拟元素
语法	selector:pseudo-class	selector::pseudo-element
示例	:hover, :first-child, :focus	::before, ::after, ::first-letter
应用范围	整个元素	元素的部分内容
示例代码	a:hover { color: red; }	p::before { content: "👉 "; }

---

总结

什么时候用伪类？

• 当你想要选择 特定状态下的元素（如悬停、选中、焦点）。
• 当你想要选择某个特定位置的子元素（如 :nth-child()）。

什么时候用伪元素？

• 当你想要选中 元素的部分内容（如第一行、第一个字母）。
• 当你想要在元素 前后添加内容（如 ::before, ::after）。

---

1. 伪类 用 : 选择 特殊状态 的元素（如 :hover）。
2. 伪元素 用 :: 选择 元素的一部分（如 ::before）。
3. 常见应用场景：
   • :hover → 鼠标悬停
   • :nth-child(n) → 选中特定子元素
   • ::before / ::after → 动态插入内容
   • ::selection → 选中文本高亮