css伪类和伪元素的前世今生，:before和::before傻傻分不清！

首先声明 : 伪类与伪元素的本质区别为是否创造了新元素

伪类( ：)：存在DOM文档中,为辅助类，不写在html中，但却为原来对元素的描述做到补充

伪元素选择符( ::  )：不存在在DOM文档中，是虚拟的元素，是创建新元素，为某个元素的子元素

常见伪类:      :before   :after   :first-child(卖个关子,事实上都不是伪类,以下将会阐述为什么)       ----对被选择的元素进行类的补充描述

 

 

p ::before 和 ::after是伪元素，则会创建元素，则会为p元素的子元素"222"的前后都创建一个子元素,前是::before,后是::after

回过头来我们来看:after和:before

 

 

 发现竟然是一样的！！！

原来我翻阅资料才知道，在css中中伪类一直用 : 表示，如 :hover, :active 等

伪元素在css中也已经存在,当时最经典的代表就是:before与:after

后来经过css3的修订,把:before和:after修改为::before和::after以此来以写法的形式来区别(::伪元素)和(:伪类)的不同,所以说::before和:before没有本质的不同，只不过是css不同发展时期写法的演变和象征着伪类和伪元素的区分清晰。同样这样的过渡情况也落在了:first-letter和:first-line两者，无论(::)还是(:)其实都是伪元素,

 其实本质上创建一个新元素，可以想象成

what's going on?

变成了

what's going on?

,用创建的新元素包住原来的元素

接下来我们以画面的形式再呈现一下，伪类和伪元素的不同:

 

这才是真正的伪类选择器，只为该元素增加一个辅助类，辅助类描述为color:red !

常用伪类有：

:active 选择正在被激活的元素（匹配指定状态）

:hover 选择被鼠标悬浮着的元素（匹配指定状态）

:link 选择未被访问的元素 （匹配指定状态）

:first-child 选择满足是其父元素的第一个子元素的元素

:last-child 选择满足是其父元素的最后一个子元素的元素

:disable 选择每个已禁止的元素

:enable 选择每个已启动的元素

:checked 选择每个被选中的元素

:nth-child(n) 选择满足是其父元素的第n个子元素的元素
其中n的阐述部分可以多样化,例如  3n  n+3  代表3的倍数  从n(1)+3==4，第四个元素开始

常用伪元素有：

::after (或者说是:after,以下部分相同)在指定元素的内容后面插入内容

::before 在指定元素的内容前面插入内容

::first-letter 选择指定元素的第一个单词

::first-line 选择指定元素的第一行

善用工具,也善洞悉本质！