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

引入

有同窗在使用CSS伪元素时使用 :: (双冒号)产生疑问。 进而对：(单冒号)和::（双冒号）的区别产生疑问。

而咱们在使用伪类伪元素的时候经常都是使用单冒号。

那么咱们就来看看怎么回事吧。

区别

之会有疑问，其实这是由于CSS2未遵循W3C规范，伪类和伪元素统一使用单冒号表示。

而许多人初学时养成了全都使用单冒号的习惯。

在以后的CSS3版本时候规定了伪类使用单冒号，而伪元素则使用双冒号表示的标准

那么顺便介绍一下伪类和伪元素的是什么吧

1、 : 伪类

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如：:hover、:visited等

也有咱们常见的伪类选择器:nth-child()、last-child

2、 :: 伪元素

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

案例演示

伪类使用

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

伪元素使用

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

p::before { // css3写法 标准
	content: '*'
}
复制代码

组合使用

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

总结

因为CSS2的不规范，因此浏览器都作了单冒号和双冒号的兼容。因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

IE8不兼容（小声BB）