不正经的前端 | 八股伪元素和伪类的区别？
题干
- 伪元素和伪类
题解
伪元素和伪类都是一种特殊的选择器，它们可以用来选择或创建一些不在文档树中的元素，从而实现一些特殊的效果。它们的语法都是在选择器后面加上冒号，但是伪元素通常使用双冒号（如 ::before），而伪类通常使用单冒号（如 :hover）。
伪元素的作用是创建一个虚拟的元素，它不属于文档树中的任何一个元素，而是附加在某个元素之前或之后，或者包裹某个元素的部分内容。伪元素可以用来添加一些装饰性的内容，如图标、引号、首字母等，也可以用来实现一些布局效果，如清除浮动、多列布局等。常见的伪元素有 ::before、::after、::first-letter、::first-line、::selection 等。
伪类的作用是根据某个元素的状态或位置来选择它，而不是根据它的属性或内容。伪类可以用来实现一些交互效果，如鼠标悬停、点击、聚焦等，也可以用来选择一些特殊的元素，如第一个子元素、最后一个子元素、奇数子元素、偶数子元素等。常见的伪类有 :hover、:active、:focus、:checked、:first-child、:last-child、:nth-child(n) 等。
总结一下，伪元素和伪类的区别主要有以下几点：
- 语法上，伪元素使用双冒号，伪类使用单冒号。
- 功能上，伪元素创建一个虚拟的元素，伪类选择一个已有的元素。
- 数量上，每个元素只能有一个伪元素，但可以有多个伪类。
- 优先级上，伪元素的优先级低于普通选择器，但高于通配符选择器；伪类的优先级等于普通选择器。
相关
贡献者
isboyjc