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

CSS教程

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

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

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

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

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

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

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年9月25日

Previous Story

CSS教程

CSS剪裁和遮罩

在计算机图形学领域,剪切和掩蔽是两种非常常见的操作。 它们都模糊了视觉元素的一部分,但两者之间有一些差异。 在 …

...

Next Story

CSS教程

CSS伪元素:::before的用法

::before的用法:创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容,此元素默认为行内元素。

...