CSS伪类和伪元素的区别

3,140 阅读3分钟

前言

大家好,我是一拳,一个兴趣使然的前端开发程序员。

我之前一直没有系统的学习过CSS,都是用到哪里学哪里,最近打算系统的学习一下CSS。因此会写一些文章把学习过程中的收获分享出来。

不知道大家对CSS的伪类和伪元素是否熟系,是否了解二者的区别。我之前虽然伪类和伪元素都用过,但是一直没有深究过二者的区别,这里我们就详细说一下CSS中伪元素和伪类的区别。

什么是伪类和伪元素

伪类

伪类是添加到选择器的关键字,用于指定所选元素的特殊状态,修改特殊状态下的样式。

这是MDN文档对伪类的定义。

比如设置鼠标悬浮在按钮元素上时,设置背景色为红底白字。

button:hover{
  background:red;
	color:white
}

效果如下

image.png

常见的伪类如下图所示:

image.png

伪元素

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

这是MDN文档中对伪元素的定义,

需要注意的是,按照CSS3规范,应该使用双冒号(::)而不是单个冒号(:),以便区分伪类和伪元素。但是,由于旧版本的 W3C 规范并未对此进行特别区分,因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

常见的伪元素有:

  • ::before/:before 在选择器前添加content指定的内容,并且设定样式
  • ::after/:after 在选择器后添加content指定的内容,并且设定样式
  • ::first-letter/:first-letter 修改选择器内容第一个文字的样式
  • ::first-line/:first-line 修改选择器内容第行文字的样式
  • ::marker 选中一个 list item 的 marker box,后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上
  • ::selection 修改鼠标选中项的样式
  • ::placeholder 修改输入框占位符的样式

除了上面列举的伪元素为还有一些其他的伪元素,可以从这里查看。

伪元素和伪类的区别

语法的区别

css2中伪元素和伪类的写法是一致的,都是使用单冒号+名称来表示,在css3规范中为了清晰的加以区分,推荐使用双冒号标识伪元素,因此才会出现上面的before、after、first-letter、first-line这四个可以同时使用单双冒号表示的伪元素,css3中新增的伪元素是不支持单冒号的写法的。

含义的区别

我们同二者的定义上可以区分出二者的区别。

  • 伪类是设置指定元素在特定状态下的样式。
  • 伪元素是设置指定元素特定部分的内容和样式。

最后

本文主要总结了对css中伪类和伪元素的用法和区别,如有错误,还望不吝指正。如果各位同学感觉阅读本文有所收获,还望点赞+收藏+关注,我会持续输出前端领域相关知识干货。

参考文章:css中伪类和伪元素的区别及用法 - 熊萬萬 - 博客园