css3中的伪类和伪元素

CSS3伪类的功能有两种：

1.获取不存在与DOM树中的信息。比如<a>标签的:link、:visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
2.获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素，例如我们可以通过如下代码来实现页面内的区域跳转：

<ul class="tabs">
    <li><a href="#tab1">标签一</a></li>
    <li><a href="#tab2">标签二</a></li>
    <li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">
<!--tabed content--></div>
<div id="tab2" class="tab_content">
<!--tabed content--></div>
<div id="tab3" class="tab_content">
<!--tabed content--></div>

CSS代码

.tab_content {
  height: 200px;
  background: red;
  margin-bottom: 100px;
}
#tab1:target, #tab2:target, #tab3:target {
    background:blue;
}

二:伪元素

同样，第一段话是伪元素的清晰定义，也是伪元素与伪类最大的区别。简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

举个综合使用伪类和伪元素的栗子：

q:lang(de)::after{
    content: " (German) ";
}
q:lang(en)::after{
    content: " (English) ";
}
q:lang(fr)::after{
    content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

以上代码通过伪类"lang获取不同lang属性的节点，并为之设置伪元素::after，伪元素的内容是此节点的语言类型。

最后，总结一下伪类与伪元素的特性及其区别：

1 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2 伪元素本质上是创建了一个有内容的虚拟容器；
3 CSS3中伪类和伪元素的语法不同；
4 可以同时使用多个伪类，而只能同时使用一个伪元素；

css3中的伪类和伪元素

推荐阅读更多精彩内容