::after与:after的区别（及伪类与伪元素的区别）

写伪元素的时候，发现有的时候是:after，有的时候是::after。这两者有什么区别呢？？

1. 单冒号和双冒号的区别

CSS3之后才有双冒号::，表示伪元素

• 用于对伪类（Pseudo-class）和伪元素（Pseudo-element）进行区分。
• 即伪类只能用单冒号。
• 伪元素在CSS3中，推荐使用双冒号::

2. 伪元素和伪类的区别

伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分，本质上是创建了一个有内容的虚拟容器；

用法 selector:pseudo-element {property:value;}

• first-letter设置首字母的样式，first-line设置首行的样式
• before在元素之前添加内容
• after在元素之后插入内容

伪类则是像真正的类一样发挥着类的作用

用法 selector : pseudo-class {property: value}

常见伪类

• :link 未被访问的链接
• :visited 已被访问的链接
• :hover 鼠标悬停
• :active 被激活的元素
• :focus 有键盘输入焦点
  • css定义中，:hover必须位于:link和:visited之后才有效，
  • :active 必须被置于:hover 之后，才有效
    :lang——:lang(no)指定lang属性为no或no-的元素
  • :lang 的处理与 |= 选择器相同。
• :first-child 父元素的第一个子元素（在IE中必须声明DOCTYPE）

CSS3新增了许多伪类

• 第n个特定类型元素（xxxtype）
  • :first-of-type，:last-of-type，:nth-of-type(n)，:only-of-type，:nth-last-of-type(n)
    • 特定类型元素的首个/尾个/第几个/唯一一个/倒数第几个
• 类似first-child的选择第n个元素的伪类
  • :last-child，:nth-child(n)，:only-child，:nth-last-child(n)
• :root根元素（HTML中根元素始终是HTML元素）
• :empty没有子元素的元素（包括文本节点）
• :target当前活动的目标元素
  • url后带有锚名称#指向文档内某元素，该被指向元素为目标元素
• :enable, :valid, :read-only,:checked,:required
  ......

注意

• 可以同时使用多个伪类，而只能同时使用一个伪元素；
• CSS3中伪元素的语法是两个冒号