单冒号 :
用于表示伪类,双冒号 ::
用于表示伪元素。 因为兼容性的问题,现在大部分还是统一的单冒号。
伪类
CSS伪类用来添加一些选择器的特殊效果。
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过 :hover
来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
伪元素
伪元素由 双冒号 **:**
和伪元素名称 组成。它代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过 :before
来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
区别
这里通过两个例子来说明两者的区别。
下面是一个简单的 html 列表片段:
<ul>
<li>我是第一个</li>
<li>我是第二个</li></ul>
如果想要给第一项添加样式,可以在为第一个<li>
添加一个类,并在该类中定义对应样式:
<ul>
<li class="first-item">我是第一个</li>
<li>我是第二个</li></ul>
li.first-item {
color: orange}
如果不用添加类的方法,我们可以通过给设置第一个<li>
的:first-child
伪类来为其添加样式。这个时候,被修饰的<li>
元素依然处于文档树中。
li:first-child {
color: orange}
下面是另一个简单的 html 段落片段:
<p>Hello World, and wish you have a good day!</p>
如果想要给该段落的第一个字母添加样式,可以在第一个字母中包裹一个元素,并设置该 span
元素的样式:
<p><span class="first">H</span>ello World, and wish you have a good day!</p>
.first {
font-size: 5em;}
如果不创建一个<span>
元素,我们可以通过设置<p>
的:first-letter
伪元素来为其添加样式。这个时候,看起来好像是创建了一个虚拟的<span>
元素并添加了样式,但实际上文档树中并不存在这个<span>
元素。
<p>Hello World, and wish you have a good day!</p>
p:first-letter {
font-size: 5em;}
从上述例子中可以看出,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。