解释CSS伪类和伪元素的区别，并举例说明。

CSS伪类和伪元素是用于选择HTML文档中特定元素或元素的部分内容的CSS选择器。它们的区别在于它们所选择的目标不同。

CSS伪类（Pseudo-classes）是用于选择符合特定状态或特定条件的元素。伪类以冒号（:）开头，用于选择元素的某个特定状态或特定位置。

示例1：:hover伪类用于选择鼠标悬停在元素上的状态。

a:hover {
  color: red;
}
1
2
3

示例2：:nth-child(n)伪类用于选择父元素下的第n个子元素。

li:nth-child(odd) {
  background-color: lightgray;
}
1
2
3

CSS伪元素（Pseudo-elements）用于选择元素的某个特定部分或生成元素的某个部分。伪元素以双冒号（::）开头，用于选择元素的某个特定部分，如元素的首字母、元素的第一行文本等。

示例1：::first-letter伪元素用于选择元素的第一个字母。

p::first-letter {
  font-size: 24px;
  font-weight: bold;
}
1
2
3
4

示例2：::before伪元素用于在元素的内容前插入生成的内容。

blockquote::before {
  content: "Quote: ";
  font-style: italic;
}
1
2
3
4

总结：

• 伪类（Pseudo-classes）选择符合特定状态或特定条件的元素。
• 伪元素（Pseudo-elements）选择元素的某个特定部分或生成元素的某个部分。

是用于选择不同层次的目标，伪类选择整个元素的状态或位置，而伪元素选择元素的特定部分或生成的部分。