伪类和伪元素(伪对象)的区别和使用

【1】是什么

w3c 对两者的定义：
• CSS 伪类用于向某些选择器添加特殊的效果。
• CSS 伪元素用于将特殊的效果添加到某些选择器。
其实根本意思就是就是对那些不能通过class、id等选择元素的补充

是不是不够直观？好，我们来个定义，伪就是“假”的意思，伪类就是创建了一个假的类名；伪元素就是创建了一个假的元素标签。不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

伪类举例：你想给ul里面的第一个li改变背景

一般方法就是给第一个li加一个类名然后css样式 .first{background:red}就搞定了
<ul>
<li class=”first”>1</li>
<li>2</li>
</ul>
同样使用伪类的方法li:first-child{background:red}可以达到同样的效果，所以说伪类就是相当于创建了一个假的类名，也可以达到效果，是不是很爽啊！

常用的伪类平面图：

image.png

常用的伪类分类图：

image.png

伪元素举例：你想给ul里面的第一个li改变背景

li::first-letter{background:red}
我们要是不用伪元素怎么实现呢
<ul>
<li><span>1</span></li>
<li>2</li>
</ul>
li span{background:red}

伪元素真实项目还用举例：

image.png

常用的伪元素平面图：

image.png

常用的伪元素类分类图：

image.png

【2】区别

伪类的效果可以通过添加实际的类名来实现
伪元素的效果可以通过添加实际的元素来实现
所以它们根本区别在于：它们是否创造了新的元素
注意：
伪类只能使用“：”
而伪元素既可以使用“:”，也可以使用“::”
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

相关问题
:after/::after和:before/::before的异同
相同点

都可以用来表示伪类对象，用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的
不同点

:before/:after是Css2的写法，::before/::after是Css3的写法
:before/:after 的兼容性要比::before/::after好 ，
不过在H5开发中建议使用::before/::after比较好
注意：

伪对象要配合content属性一起使用
伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入