css中伪类和伪元素

刚开始看到这两个东西的时候还以为这两个是一样的，是因为没有很清楚的了解它们，所以就研究了一下它两是什么以及有什么不同。

伪类

w3中是这样定义伪类的：

CSS 伪类用于向某些选择器添加特殊的效果。

而css3是这样描述的，感觉更容易理解一点

• 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

• 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
• 任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

伪类种类

举个例子理解会更容易些：

p:first-child {
  color: red;
  } 
///下面是html
<p>first</p>
<p>second</p>

该代码表示匹配第一个<p>元素，则显示为

伪元素

w3中是这样定义伪类的：

CSS 伪元素用于将特殊的效果添加到某些选择器。

再看看css3中是如何定义的：

• 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。

• 伪元素的由两个冒号::开头，然后是伪元素的名称。
• 使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。
• 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。
伪元素种类

那么再举个例子说明伪元素：

p::first-letter 
{
   color: red;
}
///下面是html
<p>first</p>

此代码主要是给<p>标签的第一个字母添加了样式，所以其显示为：

区别：

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