每天一个前端冷知识系列：CSS 伪类选择器中的: 和 ::区别是什么？

我们在平时工作中或者看到其他一些前端人员写伪类选择器的时候经常能看到有时候一个冒号，有时候两个冒号，而且似乎都是可以的，所以，这两者到底有什么区别呢？

 

这里面其实有一个很大的区别，就是 hover 和 after 虽然我们在早期都管他们叫伪类，但是实际上他们俩的作用并不一样，一个类似于JS效果，一个类似于一个元素。

所以在后来，很多程序员不干了，觉得其实他们并不一样，严谨的 W3C 就把类似于元素的给专门剥离出来了，叫专门叫做伪元素。

 

然后，W3C官方也给这两者进行了的定义：

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪元素用于将特殊的效果添加到某些选择器。

 

可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 CSS 无法描述的东西。

 

所以最后的结论就是 ：伪类偏向于元素的动作效果，伪元素偏向于元素的属性。

而最早的并没有对这些进行区分，所以最早的伪类都是一个冒号。

 

所以我们最早看到的:after、:before虽然属于伪元素，但是已经属于最早都定型了，所以就一直在那放着了。

然后 CSS3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。所以对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

简单来说就是一场最早官方没想好，后期想分类出来，但是之前的也只就能这样的一个事件了，用咱们程序员的话就解释为：历史遗留问题。

 

咱们看一下目前的伪类：

伪元素（单双冒号都可以）：

 

---

hello，各位亲爱的小伙伴们，我是李游Leo，如果你正处于选择恐惧的话，我推荐您学习我的前端到全栈的课程，职位对标阿里P6 - P7 哦，马上来学习改变自己的命运吧！

购课后，您将获得永久的课程更新权，再也不是一手买卖，新的前端知识也会持续更新进去哦，每周两节的直播，并且全部课程为我一个人录制，不用担心换老师的不适应感，并且获得1 v 1的专业辅导，进入官方微信、QQ群和小伙伴们一起成长，最后一直到就业，绝对王者级享受哦～。

可以点击 我的百科 通过百度百科更多了解我^ ^

购买课程的小伙伴们请扫描下面的二维码，入驻官方的QQ群，和老师随时互动，当然也会有一些一手的群内福利哦！

小活动：如果通过下方本网内购链接购买该课程的话，更除了可以获得超值课程之外还可以额外获得一份现金礼品，先到先得哦！^ ^
李游Leo - Web前端,从零基础到全栈工程师