前端面经-CSS篇(三）---伪元素和伪类选择器

（一）伪元素

一、什么是 CSS 伪元素？

伪元素是 CSS 创建的“假元素”，它不是 HTML 中真实存在的标签，是一种由 CSS 创建出来的“虚拟元素节点”，它并不真实存在于 HTML 的 DOM 结构中，但浏览器在渲染时会像处理普通元素一样，把它插入进渲染树中。你可以用来添加一些装饰、内容、布局结构等。

它“模拟”了某个元素的某个特定部分，比如：

• ::before：用于在元素内容之前插入内容。
• ::after：用于在元素内容之后插入内容。
• ::first-letter：用于选中文本内容的第一个字母。
• ::first-line：用于选中文本内容的第一行。

所以你可以把它理解为：

是一种“不需要写在 HTML 中，但能像真实标签一样被样式化”的工具。

二、伪元素的语法和使用方式

基本语法：selector就是你选择的元素，pseudo-element就是你需要模拟这个元素的某个特定部分：常见的就是before、after、first-letter、first-line

selector::pseudo-element {
  content: "xxx"; /* 必须！ */
  /* 其他样式 */
}

✅ 注意：使用 ::before 和 ::after 时，必须写 content 属性，即使是空字符串，否则不会生效！

三、伪元素的样式支持

伪元素几乎支持大多数样式：

• color, background, font, padding, margin, border, box-shadow, position, display 等等

 你可以像给真实元素一样写：

button::after {
  content: "🔔";
  display: inline-block;
  margin-left: 8px;
  color: red;
}

 我们现在知道伪元素是什么了，那么我们为什么要使用伪元素呢？

🔥四、常见应用场景（经典！）

1. ✅ 自动加内容：比如列表前自动加“编号”、冒号、icon、提示等：

li::before {
  content: "• ";
}

2. ✅ 做角标、徽标、提示小红点 

  <div class="button">消息</div>
.button {
      position: relative; /* 必须设置为 relative，才能让 ::after 定位相对于它 */
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
    }
    .button::after {
      content: "";
      position: absolute;
      top: -5px;
      right: -5px;
      width: 10px;
      height: 10px;
      background: red;
      border-radius: 50%;
      box-shadow: 0 0 2px rgba(0,0,0,0.2);
    }

 

这里涉及到一个 position定位的问题，这个我后面的博客会解释

3. ✅ 清除浮动（经典 clearfix 技巧）

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

 可能有小伙伴在想为什么“清除浮动”要加一个伪元素？不能直接对父元素设置 clear 吗？

clear 的作用是 “谁清除谁向下避开浮动”

• clear: both 是让某个元素避免和浮动元素“并排”。

• 它的作用是：“我不要挨着浮动元素，我会换行或向下避开”

• 它本身必须出现在浮动元素之后才有效

• ❓所以关键来了：

  你想“清除浮动”，必须有一个元素在浮动元素后面，它来执行 clear。 

✅ 为什么要用伪元素？

因为你不能强