伪类(:)和伪元素(::)

• 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
  简而言之：伪类总是以一个冒号开头。伪元素通常以两个冒号开头。
  在 CSS2 时代，伪元素和伪类均是以一个冒号开头的；在 CSS2.1 之后，为了对伪元素和伪类加以区分，规定伪类继续以一个冒号开头，而伪元素改为以两个冒号开头。
  但是为了向前兼容，浏览器同样接受 CSS2 时代已经存在的伪元素（它们包括:before, :after, :first-line, :first-letter）的单冒号写法。但是对于 CSS2 之后所有新增的伪元素（例如::selection），必须采用双冒号写法。
  一些老旧的浏览器不支持双冒号的写法，因此如果必须兼容旧浏览器，则应该使用单冒号写法。IE 从 9 开始支持双冒号写法。

• 伪类：

属性	描述	在哪个 CSS 版本中定义
:link		css1
:visited		css1
:hover		css1
:active		css1
:focus		css2
:first-child		css2
:lang		css2
:enabled	UI元素状态伪类 开始=== ":enabled",":disabled",":checked"等伪类称为UI元素状态伪类	css3
:disabled	"type="text"有enable和disabled两种状态，前者为可写状态后者为不可写状态	css3
:checked	"type="radio"和"type="checkbox""有"checked"状态(不加:checked时，是没有选中时的样式)，没有:unchecked这个伪类	css3
:read-write		css3
:read-only		css3
:optional		css3
:required		css3
:in-range		css3
:out-of-range		css3
:valid		css3
:invalid	UI元素状态伪类 结束===	css
:root	结构性伪类选择器 开始=== 四个基本的结构性伪类选择器 :root,:target,:empty,:not 其他的结构性伪类选择器 :first-of-type，:first-child等，如下	css3
:target		css3
:empty	举例：p:empty {}	css3
:not	举例：:not(p) {}	css3
:first-of-type	父级的第一个此种元素类型，等同于 :nth-of-type(1)	css3
:nth-of-type(n)	父级的第n个此种元素类型。举例：p:nth-of-type(2) 父级的类型为p的子元素，且是第2个； 先确定了元素类型，再找第几个	css3
:last-of-type	父级的最后一个此种元素类型	css3
:nth-last-of-type(n)	父级的倒数第n个此种元素类型	css3
:only-of-type	父级的唯一此种类型元素	css3
:first-child	元素是父级的第一个元素时	css3
:nth-child(n)	元素是父级的第n个元素时。举例：p:nth-child(2) 父级的第2个元素，且是p类型； 先确定了第几个子元素，再匹配类型	css3
:last-child	元素是父级的最后一个元素时	css3
:nth-last-child(n)	元素是父级的倒数第n个元素时	css3
:only-child	元素是父级的唯一一个元素时 结构性伪类选择器 结束===	css3

• 伪元素：

属性	描述	在哪个 CSS 版本中定义
::first-letter		css1
::first-line		css1
::before		css2
::after		css2
::selection		css3

• 伪类(:)1个冒号和伪元素(::)2个冒号，比较好的介绍文章 ：
  https://www.renfei.org/blog/css-pseudo-class-and-pseudo-element.html