CSS中一个冒号（:）和两个冒号（::）的区别

引荐：css视频教程

一个冒号是伪类，两个冒号是伪元素

伪类可以独立于文档的元从来分配样式，且可以分配给任何元素，逻辑上和功效上类相似，但是其是预定义的、不存在于文档树中且表达方式也不一样，所以叫伪类。

伪元素所操纵的内容和一个元素操纵的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

伪类有：:first-child ，:link:，vistited，:hover:，active:focus，:lang

伪元素有：:first-line，:first-letter，:before，:after （在苏沈细雨编的CSS2.0中文手册中把:first-line，:first-letter列为伪类应当是懂得上的错误）

提示，假如你的网站只需要兼容webkit、firefox、opera等阅读器，倡议关于伪元素采纳双冒号的写法，假如不得不兼容IE阅读器，还是用CSS2的单冒号写法比力平安

伪类和伪元素的不同：

伪类

伪类选中元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标记。由于状态是动态转变的，所以一个元素到达一个特定状态时，它大概得到一个伪类的样式；当状态改动时，它又会失去这个样式。由此可以看出，它的功效和class有些相似，但它是基于文档之外的抽象，所以叫伪类。

:link

伪类将利用于未被拜访过的链接，与:visited互斥。

:hover

伪类将利用于有鼠标指针悬停于其上的元素。

:active

伪类将利用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited

伪类将利用于已经被拜访过的链接，与:link互斥。

:focus

伪类将利用于具有键盘输入焦点的元素。

:first-child

伪类将利用于元素在页面中第一次显现的时候。

:lang

伪类将利用于元素带有指定lang的状况。

伪元素

与伪类针对非凡状态的元素不一样的是，伪元素是对元素中的特定内容停止操纵，它所操纵的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去拔取诸如元素内容第一个字（母）、第一行，拔取某些内容前面或后面这种一般的选中器没法完成的工作。它操纵的内容实际上和元素是雷同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

::first-letter

伪元素的样式将利用于元素文本的第一个字（母）。

::first-line

伪元素的样式将利用于元素文本的第一行。

::before

在元素内容的最前面增加新内容。

::after

在元素内容的最后面增加新内容。

::before和::after平常与CSS内容生成配合使用。