伪元素与伪类

承接上篇css选择器的归类，细化区分一下伪元素和伪类的区别。ps：在日常开发中总是弄混。

概念

• 伪元素

w3c定义：用于将特殊的效果添加到某些选择器。

我的理解：在原有的dom树中，添加新的元素并为它们添加效果

• 伪类

w3c定义：用于向某些选择器添加特殊的效果。

我的理解：为处在不同状态中的已有元素添加效果

伪元素有哪些？

伪元素	作用
after	在选中元素中创建一个后置的子节点
before	在选中元素中创建一个前置的子节点
first-line	选取文字块首行字符
first-letter	选取文字块首行首个字符
selection	选取文档中高亮(反白)的部分
placeholder	选取字段的占位符文本(提示信息)
grammar-error	选取被 UA 标记为语法错误的文本
spelling-error	选取被 UA 标记为拼写错误的文本
marker	选取列表自动生成的项目标记符号
cue	匹配所选元素中 WebVTT 提示
backdrop	匹配全屏模式下的背景
slotted	用于选定那些被放在 HTML模板 中的元素
inactive-selection	选取非活动状态时文档中高亮(反白)的部分

伪类划分

伪类	分类	作用
E:link	动态伪类	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited	动态伪类	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active	动态伪类	选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover	动态伪类	选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus	动态伪类	选择匹配的E元素，而且匹配元素获取焦点
E:fisrt-child	结构伪类	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	结构伪类	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root	结构伪类	选择匹配元素E所在文档的根元素。
E F:nth-child(n)	结构伪类	选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n)	结构伪类	选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n)	结构伪类	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	结构伪类	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	结构伪类	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-tye	结构伪类	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	结构伪类	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	结构伪类	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	结构伪类	选择没有子元素的元素，而且该元素也不包含任何文本节点
E: lang(language)	语言伪类	用来匹配使用指定语言的元素。
E:checked	元素状态伪类	匹配每个选中的输入元素（仅适用于单选按钮或复选框）
E:enabled	元素状态伪类	匹配每个启用的的元素（主要用于表单元素）
E:disabled	元素状态伪类	匹配每个禁用的的元素（主要用于表单元素）
E:target	目标伪类	选择匹配E的所有元素，且匹配元素被相关URL指向。URL 带有后面跟有锚名称 #，指向文档内某个具体的元素，这个被链接的元素就是目标元素(target element)。
E:not(F)	否定伪类	匹配所有除F外的E元素

css伪类可被分为6种，分别为：动态伪类、目标伪类、语言伪类、元素状态伪类、结构伪类、否定伪类。其中动态伪类又包含两种：锚点伪类（常见有:link，:visited）、行为伪类（常见有:hover，:active和:focus）。

区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素，所以两者的主要区别是：它们是否创建了一个文档树之外的元素

css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，但除了少部分伪元素如::backdrop必须使用双冒号（::），大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after一样可以正常运行。