# 6、CSS伪类、伪元素
css
引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。
# 伪类
用于当已有元素处于某个DOM树无法描述的状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如,当用户悬停在指定的元素时,我们可以用
: hover
来描述这个元素的状态。虽然和普通的css
类似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称之为伪类;
# 伪元素
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如,可以通过
:before
来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本,但是这些文本实际上并不在DOM
树中。
# 伪类和伪元素的区别
伪类的操作对象是
DOM
树中已有的元素,而伪元素则创建了一个dom
树之外的元素。因此,伪类和伪元素的区别在于:有没有创建一个
DOM
树之外的元素;
# 伪元素是使用单冒号还是双冒号
CSS3
规范中的要求使用双冒号::
表示伪元素,以此来区分伪元素和伪类。比如
::before
和::after
等伪元素使用双冒号::
,:hover
和:active
等伪类使用单冒号:
。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号::
表示方法。然而,除了少部分伪元素,如
::backdrop
必须使用双冒号,大部分伪元素都支持单冒号和双冒号的写法,比如::after
,写成:after
也可以正确运行。