伪类和伪元素

伪类

一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
:active
:focus
:hover
:link
:visited
:lang
UI状态元素伪类选择器
:disabled
:enabled
:checked
结构性伪类选择器：
:nth-child
:nth-of-type
:first-child
1、获取不存在于DOM树中的信息。比如<a>标签的:link、:visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
2、获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素。

a:active 必须被置于 a:hover 之后，才是有效的。a:active是鼠标按下时的样式。
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

.tab_content {
  height: 800px;
  background: red;
  margin-bottom: 100px;
}
#tab1:target, #tab2:target, #tab3:target {
    background:blue;
}
<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>

点击“标签一”，#tab1背景变蓝。其他背景是红色。
点击“标签二”，#tab2背景变蓝。其他背景是红色。
点击“标签三”，#tab3背景变蓝。其他背景是红色。

伪元素

:first-letter
:first-line
:before
:after
伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。
以:first-line为例，它获取了指定元素的第一行内容并且将第一行的内容加入到虚拟容器中。

其他

1、在css2中伪元素和伪类都是用一个冒号。css3中伪元素使用两个冒号，是为了区别伪类和伪元素。
当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号。
2、一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。可以同时使用多个伪类，而只能同时使用一个伪元素。

table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}
//能够被5整除的奇数行设置背景色#f0f

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

3、伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器；伪类是要获取符合某种状态的元素，给它添加样式；伪元素是要给某个元素创建虚拟容器，添加内容。