在CSS中，伪元素与伪类的功能有何不同？请阐述它们各自的作用，并说明两者之间的主要区别。

回答思路

1. 【回答框架 1】伪类是用于定义元素特定状态或位置的选择器，例如:hover、:focus、:first-child，它们基于元素的当前状态或DOM结构中的位置来应用样式，不产生新内容。
2. 【回答框架 2】伪元素则用于创建并样式化元素的特定部分或插入虚拟内容，例如::before、::after、::first-line，它们会生成一个额外的内容盒子，可添加装饰性内容。
3. 【回答框架 3】主要区别在于：伪类以单个冒号（:）开头，关注元素状态；伪元素以双冒号（::）开头（旧版可能为单冒号），用于设计不可直接访问的文档部分。
4. 【回答框架 4】在用法上，伪类可直接作用于现有元素，而伪元素需配合content属性（在::before/::after中）来显示内容，且每个元素可用多个伪类，伪元素通常每类只能用一个。
5. 【关键点 1】伪类表示状态，伪元素创建内容或样式化部分。
6. 【关键点 2】单冒号用于伪类，双冒号用于伪元素。
7. 【关键点 3】伪元素常需content属性支撑。
8. 【关键点 4】两者可结合使用，以增强样式灵活性。
9. 【易错点 1】混淆单双冒号写法，特别是在旧浏览器兼容场景。
10. 【易错点 2】滥用伪元素生成重要内容，不利于可访问性和SEO。
11. 【易错点 3】过度依赖伪类组合导致选择器复杂度升高。