【CSS基础】伪类与伪元素的区别

引入

有同学在使用CSS伪元素时使用 :: (双冒号)产生疑问。进而对：(单冒号)和::（双冒号）的区别产生疑问。而我们在使用伪类伪元素的时候常常都是使用单冒号。那么我们就来看看怎么回事吧。

之会有疑问，其实这是因为CSS2未遵循W3C规范，伪类和伪元素统一使用单冒号表示。而许多人初学时养成了全都使用单冒号的习惯。在之后的CSS3版本时候规定了伪类使用单冒号，而伪元素则使用双冒号表示的标准，那么顺便介绍一下伪类和伪元素的是什么吧

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如：:hover、:visited等
也有我们常见的伪类选择器:nth-child()、last-child

而伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
我们常见的包括::before、::after,相信许多同学在学习清除浮动时都会使用到，但大多数都用的单冒号

// 伪类 代表鼠标经过时候，颜色变为浅灰
.demo:hover {
	color: #efefef;
}

// 伪元素 表示在P标签内容渲染前先填充一个*
p:before { // css2写法 非标准
	content: '*'
}

p::before { // css3写法 标准
	content: '*'
}

p:first-child::before { // 选择第一个P标签病在内容渲染前先填充一个*
	content: '*'
}

由于CSS2的不规范，所以浏览器都做了单冒号和双冒号的兼容。所以目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。
注意：IE8不兼容