伪类与伪元素的区别

问题

伪类和伪元素有什么区别？

解答

伪类（Pseudo-classes）

伪类用于选择元素的特定状态，使用单冒号 :。

/* 鼠标悬停状态 */
a:hover {
  color: red;
}

/* 第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 获得焦点状态 */
input:focus {
  border-color: blue;
}

/* 第偶数个元素 */
tr:nth-child(even) {
  background: #f5f5f5;
}

伪元素（Pseudo-elements）

伪元素用于创建不在 DOM 中的虚拟元素，使用双冒号 ::。

/* 在元素内容前插入 */
.quote::before {
  content: '"';
}

/* 在元素内容后插入 */
.quote::after {
  content: '"';
}

/* 选中第一行 */
p::first-line {
  font-weight: bold;
}

/* 选中第一个字母 */
p::first-letter {
  font-size: 2em;
}

实际应用示例

<ul class="list">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

/* 伪类：选择第一个 li */
.list li:first-child {
  color: red;
}

/* 伪元素：给每个 li 前面加图标 */
.list li::before {
  content: '✓ ';
  color: green;
}

对比表格

特性	伪类	伪元素
语法	:	::
作用	选择元素状态	创建虚拟元素
DOM	不创建新元素	创建虚拟元素
数量	可叠加多个	同类型只能一个

/* 伪类可以叠加 */
a:hover:focus {
  color: red;
}

/* 伪元素同类型只能一个，这样写无效 */
p::before::before {
  /* 无效 */
}

关键点

• 伪类用 : 选择状态，伪元素用 :: 创建虚拟元素
• 伪类不产生新元素，伪元素会产生一个不在 DOM 树中的元素
• ::before 和 ::after 必须配合 content 属性使用
• CSS2 中伪元素也用单冒号，为兼容性考虑浏览器两种写法都支持
• 一个选择器可以同时使用多个伪类，但同类型伪元素只能用一个