伪类和伪元素

伪类

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

a{
　　:link => 　　a 标签（默认）
　　:hover =>　　鼠标放在a标签
　　:active =>　　鼠标点a标签
　　:visited =>　　a 标签被访问过
}
input{//表单元素
　　:focus => 　匹配已聚焦点的表单元素
　　:enabled =>　　匹配已经启用的表单元素（默认）
　　:disabled =>　　匹配禁用的表单元素
　　:checked =>　　匹配被选中的表单元素
}
:root =>匹配根元素即html
:not(p) =>选择不是p的所有元素
p:empty =>选择没有子节点的p，包括空格

:target =>用来修改被点击的a标签所对应的锚点的样式 eg：```<a href="#mao1"></a>``` 点击这个a 对应的```<p id="mao1"></p>```样式会被修改。

:lang(en) =>选择属性lang的值为en的元素
:first-of-type =>p:first-of-type //选择每个父容器内的第一个p元素
:last-of-type =>p:last-of-type //选择每个父容器内的倒数第一个p元素
:nth-of-type =>p:nth-of-type(2) //选择每个父容器内的第二个p元素
:nth-last-of-type =>p:nth-last-of-type //选择每个父容器内的倒数第二个p元素
:only-of-type =>p:only-of-type //选择每个只有一个p元素的父容器内的p元素（父元素可包含多个其他元素）
:only-child =>p:only-child //选择每个有且仅有一个p元素的父容器内的p元素
:first-child =>p:first-child//选择每个父容器中的第一个且为p的子元素
:last-child =>p:last-child//选择每个父容器中的最后一个且为p的子元素
:nth-child(n) =>p:nth-child(2)//选择每个父容器中的第二个且为p的子元素
:nth-last-child(n) => p:nth-last-child(2) //选择每个父容器中的倒数第二个且为p的子元素

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

css3规定伪元素由两个冒号开头作为标示::,可能会改变dom结构，创建虚拟dom。

::before,::after //这两个伪类会在选择的元素的前面和后面创建虚拟dom 通常和content联合shiyong

::first-letter,first-line //这两个伪类只要用于改变选中元素内文本节点的第一个字母，第一行的样式

::selection //用于修改用户用鼠标选中的文本的样式，仅限于color、background、cursor、outline的修改。IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。Firefox 支持替代的 ::-moz-selection

区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号 ::，:hover和:active等伪类使用单冒号 : 。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。