伪类和伪元素的区别
伪类
伪类:
用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的。
例如:
当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,
可以为已有元素添加样式,
但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为伪类。
伪元素
伪元素:
用于创建一些不在DOM树中的元素,
并为其添加样式。
例如,我们可以通过::before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用户可以看见这些文本,但是它实际上并不在DOM文档中。
css3规范中要求使用双冒号(::)表示伪元素,以此来区分伪类和伪元素,比如,
::before和::after等伪元素使用双冒号(::),
:hover和:active伪类使用单冒号(:).
除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。
w3c标准中说到,
虽然CSS3标准要求伪元素使用双冒号的写法,但也依然支持单冒号的写法。为了向后兼容,建议在目前还是使用单冒号的写法。
伪类和伪元素的区别
请看下面例子:
//例1
<!-- html -->
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
如果我们想要给第一列添加样式,我们可以通过以下两种方式:
(1)给第一列添加一个类,并在该类中定义样式:
<!-- html -->
<ul>
<li class='first-item'>第一列</li>
<li>第二列</li>
</ul>
<!-- css -->
.first-item{
color: orange;
}
(2)如果不用添加类的方法,我们可以通过给第一个
- 设置
:first-child伪类来为其添加样式,
这时,被修饰的li依然存在于DOM树中.
<!-- css -->
li:first-child{
color: orange;
}
//例二:
<p>Hello World,and wish you have a good day!</p>
想要给该段落第一个字母添加样式,可以有以下方法:
(1)給第一个字母包裹元素,并给span设置样式:
<!-- html -->
<p> <span class="first">H</span>ello World,and wish you have a good day!</p>
<!-- css -->
.first{
color: red;
}
(2)如果不创建元素,可以通过给
元素设置P:first-letter伪元素为其添加样式,看起来像创建了一个虚拟的span元素并为其添加样式,
实际上在DOM树中并不存在这个span元素
p::first-letter{
color: red;
}
从上述例子中我们可以看出:伪类的操作对象是DOM树中已有的元素,
而伪元素则创建了一个DOM树外的元素。
因此,伪类与伪元素的区别在于:有没有创建一个DOM树之外的元素。
伪类的效果可以通过添加一个实际的类来达到,
伪元素的效果则需要添加一个实际的元素才能达到,
这也是为什么他们一个称为伪类,一个称为伪元素的原因.
伪类选择元素基于的是当前元素处于的状态,而不是元素的id、class、属性等静态的标志。
由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;
当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,
它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。
实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。
它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。