CSS 伪类与伪元素的深入解析

在 CSS 里，伪类和伪元素都属于特殊的选择器，它们的作用是为文档里那些用常规选择器难以定位的部分添加样式。下面为你详细介绍两者的核心差异以及典型应用场景。

一、伪类（Pseudo-classes）

伪类的主要功能是选择处于特定状态的元素。它的写法是在元素选择器后面加上一个冒号（:），再跟上伪类名称。

• hover：当用户将鼠标指针悬停在元素上时，元素会应用该伪类指定的样式。
• active：在元素被激活（比如按钮被点击的瞬间）时，应用该伪类的样式。
• focus：当元素获得焦点（例如输入框被选中）时，应用该伪类的样式。

button:hover {
  background-color: #4CAF50;
  color: white;
}

a:active {
  color: red;
}

input:focus {
  border: 2px solid blue;
  outline: none;
}

二、伪元素（Pseudo-elements） 

伪元素的作用是选择元素的特定部分，像元素的内容、文本的首字母等。它的书写格式是在元素选择器后加上两个冒号（::），再跟上伪元素名称。

• ::before 和 ::after：这两个伪元素可以在元素的内容前面或后面插入虚拟内容，常被用于添加装饰性元素。

/* 在元素前插入内容 */
.element::before {
  content: "→ ";
  color: green;
}

/* 在元素后插入内容 */
.element::after {
  content: " (推荐)";
  font-style: italic;
}

• ::first-line：选择元素文本的第一行。

/* 选择首行文本 */
p::first-line {
  font-size: 1.2em;
}

/* 选择首字母 */
p::first-letter {
  font-size: 2em;
  float: left;
}

• ::selection：用于设置用户选中文本时的样式。

/* 选中文本时的样式 */
::selection {
  background-color: yellow;
  color: black;
}

三、核心差异

1. 语法差异：伪类使用单冒号（:），伪元素使用双冒号（::）。不过需要注意的是，为了兼容旧版本的 CSS，部分伪元素也可以使用单冒号。
2. 选择对象不同：伪类选择的是处于特定状态的元素，而伪元素选择的是元素的特定部分。
3. 应用数量限制：在同一个选择器中，可以同时使用多个伪类，但通常只能使用一个伪元素。

四、结语 

伪类和伪元素，作为 CSS 选择器的左膀右臂，用简洁的语法为网页注入了无限活力。它们既能轻松实现鼠标交互的灵动效果，又能巧妙修饰文本与元素细节，是提升网页品质的关键所在。CSS 的世界广袤无垠，伪类和伪元素只是其中的璀璨一角，愿你在前端开发的道路上，持续探索，挖掘更多精彩，打造出令人惊艳的 Web 作品！