关键词：css 伪类、css 伪元素

CSS 中有伪类和伪元素两种，它们在用法和意义上有一些区别。

伪类是对元素在特定状态下的一种描述。比如 :hover 代表鼠标悬停状态下的样式，:active 代表元素被激活状态下的样式。伪类始终以冒号 : 开头，并放在选择器的最后。常用的 CSS 伪类有：

1. :hover，鼠标移动到元素上时产生的效果。

2. :active，鼠标按下去但没有释放时的状态。

3. :focus，元素获取焦点时的状态。

4. :visited，链接被点击并访问过时的状态。

5. :nth-child(n)，选中元素的第 n 个 child 元素。

6. :first-child，选中第一个 child 元素。

7. :last-child，选中最后一个 child 元素。

另一方面，伪元素是对元素局部样式的描述，允许我们对某个元素的特定部分进行样式设置。比如 ::before 可使用内容插入做出类似插画的效果，::after 可用于为元素添加内容等等。双冒号 :: 也是伪元素的标识符。常用的 CSS 伪元素有：

1. ::before，在元素内容前插入内容。

2. ::after，在元素内容后插入内容。

3. ::first-letter，选择元素的第一个字母。

4. ::first-line，选择元素的第一行。

5. ::selection，选择用户选中文本的部分。

区别与使用：

• 伪类的作用是改变元素在特定状态下的样式，而伪元素则充当一个元素的某一部分来做样式处理。
• 由于伪元素技术强大，可以为元素添加完全独立的内容而无需改变 HTML，因此在一些需要前端动态处理或给传统HTML元素嵌入样式的情况下，往往会用到伪元素技术。比如用 ::before 和 ::after 实现类似插画的效果。
• 伪类和伪元素在实际应用中搭配使用，可以产生更复杂和丰富的样式效果。因此在大量的开发工程中，两者的灵活应用至关重要。