最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

CSS伪元素:伪类和伪元素的区别

CSS学习系列 林雍岷 161浏览

伪类和伪元素的区别:获取元素的途径也不是基于id、class、属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素)。

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

虽然名称相似,但伪元素与伪类不一样。将学习两者之间的明显区别。

1、伪类
目标元素符合某种标准或状态
伪类的名称前面是一个冒号
如:
:hover
:first-child
:nth-child
:not()

2、伪元素
目标元素的某一部分
伪类的名称前面有两个冒号
如:
::before
::after
::first-letter
::first-line
::selection

转载请注明:林雍岷 » CSS伪元素:伪类和伪元素的区别