伪类与伪元素的本质区别就是是否抽象创造了新元素（伪元素抽象创建了新元素）
伪类用于DOM元素的特殊状态或条件，而伪元素用于为DOM元素创建虚拟子元素。它们具有不同的语法和作用，但都能扩展CSS的功能，让开发者能够更精确地选择和样式化DOM元素。
伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不存在于文档中，它们只在外部显示可见。因此，称为“伪”元素。
例如：p标签前后添加了两个伪元素，不在文档生成，只在外部显示可见
<style>
p::before {content:"第一章：";} /* 在p标签前面添加伪元素。内容为：第一章 */
p::after {content:"Hot!"; color: red;} /* 在p标签后面添加伪元素。 */
</style>
<body>
<p>伪元素</p>
</body>
伪类：将特殊的效果添加到特定选择器上。它是在已有元素上添加类别，不会产生新的元素。
例如：为a标签添加伪类，当鼠标放到a标签，a标签中的字体变红。
a:hover{
color: red; /* 为a标签添加伪类。 */
}
</style>
</head>
<body>
<a href="#">伪类</a>
</body>
a:link {color:#FF0000;} /* 选择所有未访问的链接，只适用于a标签 */
a:visited {color:#00FF00;} /* 选择所有访问过的链接，只适用于a标签*/
a:hover {color:#FF00FF;} /* 把鼠标放在链接/元素上的状态 */
a:active {color:#0000FF;} /* 点击/选择正在活动的链接/元素*/
在CSS3中为了区分伪元素和伪类，规定使用双冒号代表伪元素，单冒号代表伪类。虽然CSS3规定了必须使用双冒号，但实际上使用单冒号也可以工作，这是由于CSS的兼容性带来的，但这并不意味着可以无所忌惮的使用单冒号，因为单双冒号的区分，可以给CSS代码带来更高的可读性。
伪类元素写法的顺序：
推理：
一个链接可能同时处于多种状态，即同时属于多个伪类，link和visited是常态效果，hover和active是瞬时效果。
未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。
再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前
其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问）
因此我们由此得出它们之间的顺序为：link>visited>hover>active（此顺序只是我们写css代码时的先后顺序，并不是内置的执行顺序）
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类和伪元素不区分大小写。