说说伪元素和伪类的区别

可直接看总结 

伪类（Pseudo-classes）
伪类用于选择元素的某种状态或位置，而不是元素本身。它们以单冒号 : 开头。
特点：
1. 伪类选择的是元素的状态或位置。
2. 伪类不会改变文档的结构，只是根据某些条件选择元素。
3. 伪类通常用于动态效果或选择特定的元素。
常见伪类：
• :hover：鼠标悬停在元素上时。
• :active：元素被激活（点击）时。
• :focus：元素获得焦点时。
• :first-child：选择父元素的第一个子元素。
• :nth-child(n)：选择父元素的第 n 个子元素。
• :not(selector)：排除某些元素。
• :checked：选择被选中的复选框或单选按钮

伪元素（Pseudo-elements）
伪元素用于选择元素的某一部分内容，而不是整个元素。它们以双冒号 :: 开头（虽然旧语法也支持单冒号 :，但双冒号是推荐的写法）。
特点：
1. 伪元素选择的是元素的某一部分内容，而不是整个元素。
2. 伪元素可以插入生成内容（如 ::before 和 ::after）。
3. 伪元素通常用于样式化元素的特定部分。
常见伪元素：
• ::before：在元素内容之前插入内容。
• ::after：在元素内容之后插入内容。
• ::first-line：选择元素的第一行文本。
• ::first-letter：选择元素的第一个字母。
• ::selection：选择用户选中的文本。 

 伪类和伪元素的主要区别
1. 选择的对象不同：
◦ 伪类：选择的是元素的状态或位置（如 :hover、:first-child）。
◦ 伪元素：选择的是元素的某一部分内容（如 ::before、::first-line）。
2. 语法不同：
◦ 伪类：以单冒号 : 开头。
◦ 伪元素：以双冒号 :: 开头（旧语法也支持单冒号，但双冒号是推荐的写法）。
3. 用途不同：
◦ 伪类：用于动态效果或选择特定的元素。
◦ 伪元素：用于样式化元素的特定部分或插入内容

最后总结：
• 伪类：选择元素的某种状态或位置。
• 伪元素：选择元素的某一部分内容或插入内容。
两者在实际开发中都非常常用，伪类用于动态效果和选择特定元素，而伪元素用于样式化元素的特定部分或插入内容。