【CSS3】伪类与伪元素真的不“伪”，且不要记混哟
博客说明
文章所涉及的部分资料来自互联网整理，当然还有自己个人的总结和看法，分享的目的在于共建社区和巩固自己。引用的资料如有侵权，请联系本人删除！幸好我在，感谢你来！
说明
前端开发一年之前从来不用，一年之后伪类伪元素真香！
但是有一个问题，伪类和伪元素傻傻分不清！今天就来好好的辨一辨它们。
伪类与伪元素
伪类
什么是伪类？
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
最常见的一个场景是在使用悬停效果的时候，当用户悬停在指定的元素时，使用:hover可以来描述这个元素的状态。
伪类，那么肯定与类有关系，它可以为已有的元素添加样式。
注意
添加样式需要在一种特定的场景下，也就是
DOM树无法描述的状态下才能为元素添加样式。
a标签应用的伪类
/* 未访问的链接 */
a:link { color: red; }
/* 已访问的链接 */
a:visited { color: blue; }
/* 鼠标悬停链接 */
a:hover { color: yellow; }
/* 已选择的链接 */
a:active { color: black; }
:hover的应用比较多，比如鼠标样式，悬浮样式。
写一个后话（写至少八个不同的:hover效果）
伪元素
什么是伪元素？
伪元素用于创建一些不在DOM文档树中的元素，并为其添加样式。
举一个经典的例子，:before会在一个元素前增加一些文本，并为这些文本添加样式。
在表现上我们是可以看到这些文本，但是这些文本实际上不在DOM文档树中。
案例（::before 伪元素）
h1::before {
content: '我是多余！';
}
<h1>Hello World！</h1>
效果：
区别
操作方式
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。
只要记住加粗的话就行！
再啰嗦一遍！伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
要是还不行，那就来看看！
案例
这里用伪类 :first-child 和伪元素 :first-letter 来进行比较，这是最经典的比对案例了。
伪类 :first-child
按照说法：伪类并没有创建元素，只是在原来的元素上加了效果。
// 使用伪类
i:first-child {color: red}
<p>
<i>A</i>
<i>B</i>
</p>
// 不使用伪类
.first-child {color: red}
<p>
<i class="first-child">A</i>
<i>B</i>
</p>
他们展示的效果是一致的。
伪元素 :first-letter
// 使用伪元素
p:first-letter {color: red}
<p>ABCD</p>
// 不使用伪元素
.first-letter {color: red}
<p><span class="first-letter">A</span>BCD</p>
表现的效果是一样的，但是实际将A用<span>标签包起来的。也就是说创建了一个新的元素。
书写方式
现在是不是看到很多双冒号的和单冒号的在css里面飘？
其实在CSS3之前，因为伪元素和伪类效果类似而且写法相仿，这就是文章开头所说的，伪元素和伪类傻傻分不清！
但 CSS3 为了区分这两兄弟，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
别急，还有一个但是！
因为IE这个落事鬼，考虑兼容性的问题，所以有的代码中还是统一的单冒号
除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法
总结
从没用过，或者不记录一下，永远不知道CSS里面也还有这么多的故事？
前端的海很深，CSS就够游一顿了！
加油⛽️！希望本文能够让你记住伪类与伪元素之间的差别！哪怕只是在本文阅读的时间之内。
感谢
万能的网络
公众号-归子莫，小程序-小归博客
如果你感觉对你有帮助的话，不妨给我点赞👍吧，持续关注也行哈！
