下面是一份结构清晰、适合整理为技术专栏或学习笔记的内容。📒

【H5 前端开发笔记】第 18 期：CSS 选择器 (3) —— 伪元素选择器详解

在上一期中，我们学习了 CSS 伪类选择器（Pseudo-class），例如：

• :hover
• :focus
• :nth-child()

本期我们继续学习另一种重要的选择器：

伪元素选择器（Pseudo-element）

伪元素用于 选择元素中的特定部分，并进行样式设置。

例如：

• 段落的第一行
• 文字的首字母
• 元素前后插入内容

一、什么是伪元素选择器

伪元素使用 双冒号 :: 表示。

语法：

选择器::伪元素{
  样式
}

示例：

p::first-letter{
  font-size:30px;
}

含义：

设置段落第一个字母的样式

二、常见伪元素选择器

常见伪元素包括：

三、::before 伪元素

::before 用于 在元素内容之前插入内容。

语法：

元素::before{
  content:"内容";
}

示例：

HTML：

<p>欢迎学习前端</p>

CSS：

p::before{
  content:"★ ";
  color:red;
}

显示效果：

★ 欢迎学习前端

注意：

content

是 必须属性。

四、::after 伪元素

::after 用于 在元素内容之后插入内容。

示例：

p::after{
  content:" ✔";
  color:green;
}

显示效果：

欢迎学习前端 ✔

常见用途：

• 添加装饰符号
• 添加图标
• 清除浮动

五、::before 与 ::after 的常见应用

1 添加装饰图标

.title::before{
  content:"📌 ";
}

效果：

📌 文章标题

2 添加分隔符

.nav li::after{
  content:" | ";
}

导航效果：

首页 | 产品 | 关于 | 联系

3 清除浮动（经典技巧）

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

这是 CSS 中非常经典的 clearfix 技术。

六、::first-letter

::first-letter 用于设置 段落第一个字母样式。

示例：

p::first-letter{
  font-size:40px;
  color:red;
}

效果：

首字母特别大

常用于：

• 文章排版
• 杂志风格页面

七、::first-line

::first-line 用于设置 第一行文字样式。

示例：

p::first-line{
  color:blue;
}

效果：

第一行文字蓝色
其他文字正常

八、::selection

::selection 用于设置 文本被选中时的样式。

示例：

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

效果：

当用户 拖动鼠标选中文字时：

背景变黄色

这种效果很多网站都会使用。

九、伪类 vs 伪元素

很多初学者会混淆这两者。

区别：

示例：

伪类：

a:hover

伪元素：

p::first-letter

十、单冒号与双冒号

早期 CSS2 只使用 单冒号：

:before
:after

在 CSS3 中推荐使用：

::before
::after

现代开发建议：

使用双冒号

十一、开发中的常见使用场景

伪元素在项目中非常常见。

例如：

1️⃣ UI 图标装饰

button::before

2️⃣ 导航分隔符

li::after

3️⃣ 清除浮动

.clearfix::after

4️⃣ 文本排版

p::first-letter

十二、本期总结

伪元素选择器用于 选择元素的特定部分。

语法：

选择器::伪元素

常见伪元素：

作用：

• 添加装饰内容
• 优化排版
• 提高 UI 效果

如果你愿意，我可以继续帮你整理下一篇：

第 19 期：CSS 盒子模型（Box Model）详解 —— width / height / padding / border / margin

这是 CSS 布局最核心的一章，也是前端面试必考知识点。🚀