论CSS3伪元素（::）与伪类（:）的区别

在CSS1，CSS2中，大家或多或少的用过 :hover，:visited, :before, :after。CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。

伪类-pseudo classes

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

它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到
举例：

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

注：伪类名字对大小写不敏感，但在定义顺序上有要求。:hover 必须被置于 :link 和 :visited 之后才是有效的，:active 必须被置于 :hover 之后才是有效的。L-V-H-A顺序不能变
例：

<style type="text/css"> a:link { color: #FF0000; text-decoration: none; } a:visited { color: #00FF00; text-decoration: none; } a:hover { color: #FF00FF; } a:active { color: #0000FF; } </style>

小结：由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

结构性伪类选择器

四个最基本的：root、not、empty、target
first-child、last-child、nth-child、nth-last-child、
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
nth-of-type、nth-last-of-type
循环使用样式

:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。“:root”选择器等同于元素

:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-child(length);/参数是具体数字/

       :nth-child(n);/*参数是n,n从0开始计算*/
       :nth-child(n*length)/*n的倍数选择，n从0开始算*/
       :nth-child(n+length);/*选择大于length后面的元素*/
       :nth-child(-n+length)/*选择小于length前面的元素*/
       :nth-child(n*length+1);/*表示隔几选一*/
        //上面length为整数

:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素。

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。

“:only-child”表示的是一个元素是它的父元素的唯一一个子元素。

UI状态元素伪类选择器

E:checked ： {attribute}

匹配所有用户界面（form表单）中处于选中状态的元素E

E:enabled ： {attribute}

匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled ： {attribute}

匹配所有用户界面（form表单）中处于不可用状态的E元素

E::selection ： {attribute}

匹配E元素中被用户选中或处于高亮状态的部分

目标伪类

E:target ： {attribute}
匹配相关URL指向的E元素

伪元素-Pseudo-elements

CSS 伪元素用于向某些选择器设置特殊效果。

CSS3定义
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

大意如下：

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

CSS2中的伪元素：:first-line,:first-letter,:before,:after;

   `:first-line:`为某个元素的第一行文字使用样式；
    `:first-letter:`为某个元素中的文字的首字母或第一个字使用样式；
    `:before:`在某个元素之前插入一些内容；
    `:after:` 在某个元素之后插入一些内容；

css3中的伪元素

那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了::first-letter,::first-line,::before,::after另外他还增加了一个::selection。

::selection用来改变浏览网页选中文的默认效果

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动，

.clearfix::after{
    content: '.';
    diaplay:block;
    width: 0;
    height:0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}//zoom(IE转有属性)可解决ie6,ie7浮动问题

小结：简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

最后，总结一下伪类与伪元素的特性及其区别：

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

秒客网