伪类、伪元素、锚伪类

伪类

CSS2中对伪类的定义是：CSS 伪类用于向某些选择器添加特殊的效果。

截止css2，伪类有如下几种：

CSS3中对伪类的定义以下：

• 伪类存在的意义是为了经过选择器找到那些不存在与DOM树中的信息（如：:link、:visited）以及不能被常规CSS选择器获取到的信息（:target用来匹配文档(页面)的URI中某个标志符的目标元素）。
• 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
• 任何常规选择器能够再任何位置使用伪类。伪类语法不区别大小写。一些伪类的做用会互斥，另一些伪类能够同时被同一个元素使用。而且，为了知足用户在操做DOM时产生的DOM结构改变，伪类也能够是动态的。

CSS3新增的伪类以下：

新增伪类	做用
E:first-child	匹配做为父元素的第一个子元素E，与E:nth-child(1)等同	结构伪类选择器
E:last-child	匹配做为父元素的最后一个子元素E，与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html
p:nth-child(n)	选择属于其父元素的第n个子元素的每一个<p>元素。
p:nth-last-child(n)	选择属于其父元素的倒数第n个子元素的每一个<p>元素。
p:nth-of-type(n)	选择属于其父元素第n个<p>元素的每一个<p>元素。
p:nth-last-of-type(n)	选择属于其父元素倒数第n个<p>元素的每一个<p>元素。
p:first-of-type	选择属于其父元素的首个<p>元素的每一个<p>元素。
p:last-of-type	选择属于其父元素的最后<p>元素的每一个<p>元素。
p:only-of-type	选择属于其父元素惟一的<p>元素的每一个<p>元素。
p:only-child	选择属于其父元素惟一的子元素的每一个<p>元素。
p:empty	选择没有子元素的每一个<p>元素（包括文本节点）。
p:target	选择当前活动的<p>元素。	目标伪类选择器
:not(p)	选择非<p>元素的每一个元素。	否认伪类选择器
:enabled	可用状态的控制表单控件。	UI元素状态伪类选择器
:disabled	禁用状态的控制表单控件。
:checked	单选框或复选框被选中的元素。

伪元素

CSS2中，对于伪类和伪元素的定义是彻底同样的。

截止CSS2，伪元素有如下几种：

CSS3对伪元素的定义以下：

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

• 伪元素的由两个冒号::开头，而后是伪元素的名称。使用两个冒号::是为了区别伪类和伪元素（CSS2中并无区别）。固然，考虑到兼容性，CSS2中已存的伪元素仍然能够使用一个冒号:的语法，可是CSS3中新增的伪元素必须使用两个冒号::。

• 一个选择器只能使用一个伪元素，而且伪元素必须处于选择器语句的最后。

简单来讲，伪元素建立了一个虚拟容器，这个容器不包含任何DOM元素，可是能够包含内容。另外，开发者还能够为伪元素定制样式。

CSS3中的伪元素为：

伪元素	做用
::first-letter	将样式添加到文本的首字母
::first-line	将样式添加到文本的首行
::before	在某元素以前插入某些内容
::after	在某元素以后插入某些内容
::selection	用来匹配突出显示的文本

伪类和伪元素的特性与区别

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

锚伪类

在支持 CSS 的浏览器中，连接的不一样状态均可以不一样的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link	未访问的连接
a:visited	已访问的连接
a:hover	鼠标移动到连接上
a:active	选定的连接