css中关于伪类和伪元素的概念

css中关于伪类和伪元素的概念由来已久，css1和css2中对这两种概念包括语法未做明显区分，css3对这两种概念及其语法则明确开来。
常见的伪类包括 :visited :hover :link :focus等，伪元素主要包括::after ::before等
css3官方给伪类和伪元素分别给出了不同定义：
伪类

1. 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
2. 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
3. 任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

由此可见伪类的功能主要有两种：

1. 获取不存在于DOM树中的信息。如a标签的:hover,:link
2. 获取不能被常规css选择器获取的信息。比如伪类:target

<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>

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

伪元素

1. 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
2. 伪元素的由两个冒号::开头，然后是伪元素的名称。
3. 使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。
4. 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
   由此看来，伪元素和伪类最大的区别就是伪元素具有某些元素的功能，创建了一个虚拟容器，这个容易不包含任何DOM元素，但是可以创建内容，另外还可以为伪元素定制样式。

伪元素和伪类的区别：

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