伪类

伪类的定义

伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息

伪类由一个冒号： 开头，冒号后跟伪类的名称和包含在圆括号中的可选参数

任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

伪类举例

• :hover

  鼠标放在链接上的状态

• :active

  正在活动链接

• :visited

  选择所有访问过的链接

• :link

  选择所有未访问链接

• :focus

  将样式添加到被选中的元素

• :lang

  允许作者来定义指定的元素中使用的语言

• :first-child

  选择元素的第一个子元素

伪元素

伪元素的定义

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：document接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。

伪元素的由两个冒号::开头，然后是伪元素的名称。

使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。

目前一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

伪元素举例

• ::first-line

  用于向文本的首行设置特殊样式

• ::first-letter

  用于向文本的首字母设置特殊样式

• ::before

  可以在元素前插入内容

• ::after

  可以在元素的内容后插入新内容

参考文献：

CSS3伪类和伪元素的特性和区别

mdn