css 区分伪类和伪元素

相信不少初学者都对这两个概念有些模糊，讲道理，仅从定义来看，这两者几乎一模一样！！咳咳，区别肯定是有的。下面进入正题：

伪类一定是类，是对元素的修饰

常见的伪类有 ：active，：hover，：focus，：link，：first-child，：target等。

个人认为，伪类是动态的：动态的交互，动态的计算。灵活地使用伪类，很多时候比js好用很多，比如斑马线表格。

这些类在DOM中是不存在的，是虚拟的，所以称为“伪”类。（伪元素的“伪”字意义相同）。
如果你仔细思考会发现，这些样式无法通过创建一般的css类实现，没有相关的语法让我们实现这些语义。因此，css加入伪类来弥补这一缺点。

伪类还是类，他的语法是更加强大的css选择器，至于{}里面的内容，你把它当做一般的类放心大胆地定义样式就好。

一个元素可以有多个类，同样可以有多个伪类。

伪元素一般是元素，是在DOM树中添加了虚拟节点

注意这里的用词：一般！这样只是方便记忆。

准确来说，伪元素创造了一个虚拟容器，类似的，这个容器不存在与DOM树，不存在于HTML文档中。

也有起修饰作用的伪元素 ： ::first-letter，定义第一个字母（或汉字）的样式。对于一段文字来说，这个选择器的结果是唯一的。

其他伪元素如::before,::after,::first-line,这些都是虚拟元素，你可以像使用span一样使用它，当然也可以同时使用多个伪元素。
注意，这三个必须有content属性，即容器中的内容，否则无法显示。举个例子，p::before{content:'aaa'}，这在p的前面添加了aaa字符串，默认是内联样式。其他属性和你熟悉的css是一样的。
你可以通过js或jQuery修改它，jQuery简单，原生js请参考这篇文章：https://blog.csdn.net/baidu_38027860/article/details/80075119

使用方式不同

伪类：我们往往会给一些元素添加多个伪类，来实现炫酷的交互效果
伪元素：常常用来添加一些没有语义的元素，仅仅是装饰效果
如导航之间的分隔符 登录 | 注册，再比如聊天气泡的三角形。
还有更高级一点的用法：元素垂直居中，给div实现的文本框加入placeholder 属性等。

标准语法不同

css3 对伪类和伪元素的语法做出了区分：单冒号表示伪类，如:hover；双冒号表示伪元素，如::before。
不过，为了兼容低版本的IE，单冒号+伪元素也是被css3兼容的。



总的来说，两者有很多相似之处，但使用方式的不同决定了这两个概念的差异，就像同音字，发音相同但含义不同。
自己写个demo，多了解一下每个伪元素和伪类的使用场景，你就不会搞混伪类和伪元素啦

更多关于概念性的区别，请参考这篇文章：https://www.cnblogs.com/ihardcoder/p/5294927.html
（讲的很详细，但 “只能使用一个伪元素” 讲错了，经验证，可以同时使用多个伪元素）

注：本人前端刚入门，以上观点如有错误还请多多指教，轻喷，侵删。