开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情
一、::before 和::after 中双冒号和单冒号有什么区别、作用
在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
单冒号（：）用于 css3 的伪类
双冒号（：：）用于 css3 的伪元素
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after 生成的内容也比::before 生成的内容靠后。
如果按堆栈视角，::after 生成的内容会在::before 生成的内容之上
作用：::before 和::after 的主要作用是在元素内容前后加上指定内容。
伪类与伪元素都是用于向选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同
二、css3 新增伪类以及伪元素
CSS3 新增伪类
p:first-of-type 选择属于其父元素的首个p元素的每个p元素。
p:last-of-type 选择属于其父元素的最后p元素的每个p元素。
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:last-child 选择属于其父元素最后一个子元素的每个p元素。
p:target 选择当前活动的p元素。
:not(p) 选择非p元素的每个元素。
:enabled 控制表单控件的可用状态。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
伪元素
::first-letter 将样式添加到文本的首字母
::first-line 将样式添加到文本的首行
::before 在某元素之前插入某些内容
::after 在某元素之后插入某些内容
