css实战：常用伪元素选择器介绍

伪元素选择器的定义

伪元素（pseudo-element） 用来创建或选择元素的一部分内容，
它看起来像是一个真实存在的元素，但实际上并不在 HTML 结构中。

语法上通常使用 双冒号 :: 表示（例如 ::before、::after）。
但为了兼容老版本浏览器，单冒号 : 仍可使用（如 :before）。

---

常用伪元素实例详解

1️⃣ ::before 与 ::after —— 生成内容的伪元素

这两个是最常用的伪元素，可用于在元素前后添加内容或修饰。

p::before {content: "→ ";color: gray;
}p::after {content: " ←";color: gray;
}

💡 注意：::before 和 ::after 必须配合 content 属性使用，
否则不会显示任何内容。

常用于：

• 给标题或段落添加图标；
• 给按钮添加视觉特效；
• 用伪元素实现装饰线条、背景遮罩等。

---

2️⃣ ::first-letter —— 首字母修饰

p::first-letter {font-size: 32px;color: #c00;font-weight: bold;
}

效果：将段落的第一个字母放大、着色，常用于杂志风格排版。

⚠️ 它只作用于块级元素（如 p、div），且不会选中隐藏文字。

---

3️⃣ ::first-line —— 首行修饰

p::first-line {font-weight: bold;text-transform: uppercase;
}

效果：仅改变段落中第一行的样式，受字体、宽度等布局影响。

---

4️⃣ ::selection —— 选中文本样式

::selection {background: yellow;color: black;
}

当用户用鼠标拖选文本时，显示自定义的背景和字体颜色。

---

5️⃣ ::placeholder —— 输入框占位符样式

input::placeholder {color: #aaa;font-style: italic;
}

用于美化输入框的 placeholder 提示文字。

---

6️⃣ ::marker —— 列表项前的项目符号

li::marker {color: red;content: "★ ";
}

可以修改 <ul>、<ol> 的列表符号样式，而无需去掉默认 list-style-type。

---

7️⃣ ::backdrop —— 模态背景层

dialog::backdrop {background: rgba(0, 0, 0, 0.5);
}

用于 <dialog> 元素或全屏 API 的背景层美化。

---

伪元素的优先级

伪元素	权重
所有伪元素（如 ::before, ::after）	0,0,0,1（与元素选择器相同）

如果与元素本身样式冲突，后定义的样式会覆盖前面的。
示例：

p { color: red; }
p::before { color: blue; } /* 生效，仅影响伪元素 */

---

伪元素与伪类的区别

对比项	伪类（Pseudo-class）	伪元素（Pseudo-element）
功能	选择元素的“状态”	选择元素的“部分”
示例	:hover, :focus, :nth-child()	::before, ::after, ::first-line
是否创建新内容	❌ 否	✅ 是（例如 ::before 可生成内容）
写法	单冒号 :	双冒号 ::（现代规范）

---

应用场景示例

/* 装饰性分割线 */
h2::before {content: "";display: block;width: 40px;height: 3px;background: #333;margin-bottom: 8px;
}/* 小红点提示 */
.notification::after {content: "";width: 8px;height: 8px;background: red;border-radius: 50%;display: inline-block;margin-left: 6px;
}

---