关于css3:CSS伪类和伪元素的区别

伪类：

用于抉择 DOM 树之外的信息，或是不能用简略选择器进行示意的信息。（相当于一个非凡的 class 选择器，用来增加一些特殊效果）
简而言之作用于元素以后的状态润饰（点击，悬浮，链接）

伪元素：

为 DOM 树没有定义的虚构元素。不同于其余选择器，它不以元素为最小抉择单元，它抉择的是元素指定内容。（相当于一个非凡的元素（div、span），能够用来寄存一些非凡款式或者内容）
简而言之作用于元素以后内容润饰（之前，之后，首字，首行）

伪类品种:

伪元素品种:

区别比拟

这里通过两个例子来阐明两者的区别。

上面是一个简略的 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;}

从上述例子中能够看出，伪类的操作对象是文档树中已有的元素，而伪元素则创立了一个文档数外的元素。因而，伪类与伪元素的区别在于：有没有创立一个文档树之外的元素。

伪元素是应用单冒号还是双冒号

CSS3 标准中的要求应用双冒号 (::) 示意伪元素，以此来辨别伪元素和伪类，比方::before 和::after 等伪元素应用双冒号 (::)，:hover 和:active 等伪类应用单冒号(:)。除了一些低于 IE8 版本的浏览器外，大部分浏览器都反对伪元素的双冒号(::) 示意办法。

然而，除了少部分伪元素，如::backdrop 必须应用双冒号，大部分伪元素都反对单冒号和双冒号的写法，比方::after，写成:after 也能够正确运行。