CSS伪类和伪元素区别?
- 1.伪类(pseudo-classes)
其核心就是用来选择DOM树之外的信息，不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果
比如 :hover :active :visited :first-child :focus :lang等
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又失去这个样式
由此看可以看出，它的功能和class有些类似，但是它是基于文档之外的抽象，所以叫伪类
- 2.伪元素(pseudo-elements)
DOM树没有定义的虚拟元素 核心就是需要创建通常不存在于文档的元素
比如::before ::after 选择的是元素指定内容，表示选择元素内容的之前的内容或之后内容
伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。用于将特殊的效果添加到某些选择器
- 3.两者区别
表示方法
css2中伪类、伪元素都是单冒号：表示
css2.1后规定伪类用单冒号表示，伪元素用双冒号::表示
浏览器同样接受css2时代已经存在的伪元素(:before :after :first :line :first-letter等)的单冒号写法
css2之后所有新增的伪元素(::selection)，应该采用双冒号的写法
css3中，伪类与伪元素在语法上也有所区别，伪元素修改以::开头。浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头 定义不同
伪类即假的类，可以添加类来达到效果
伪元素即假元素，需要通过添加元素才能到达效果
总结
伪类和伪元素都是用来表示文档树之外的"元素"
伪类和伪元素分别用单冒号:和双冒号::来表示
伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类) 是否需要添加元素才能达到效果，如果是则是伪元素，反之是伪类
- 4.相同之处
伪类和伪元素都不会出现在源文件和DOM树中。也就是说在html源文件中是看不到伪类和伪元素的
不同之处 伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征
伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的
- :link
- :visited
- :hover
- :active
- :focus
- :not()
- :first-child
- :last-child
- :nth-child
- :nth-last-child 从后面计数
- :only-child 只满足一个子元素
- :target 当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。
- :checked 被选中的input元素
- :empty 匹配没有子元素的元素
- :valid 匹配条件验证正确的表单元素
- ::before/:before 在被选元素前插入内容
- ::after/:after 在被元素后插入内容，其用法和特性与:before相似。
- ::first-letter/:first-letter 匹配元素中文本的首字母。被修饰的首字母不在文档树中
- ::first-line/:first-line 匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。
- ::selection 匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。
- ::placeholder 匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。该伪元素不是CSS的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式。
- 对于伪元素 :before 和 :after 而言，属性 content 是必须设置的，我们知道属性的值可以为字符串，也可以有其它形式，比如指向一张图片的 URL
- 配合伪类使用。伪元素 ::before 还可以配合伪类使用，这里举经常与 ::before 配合使用的伪类 :hover 例如 .before:hover:before{content:'you before'; color:red;}
- 配合取值函数 attr() 使用 例如 a::before{content: attr(title)}
伪类分类
（1）表示状态： :link 选择未访问的链接；
:visited 选择已访问的链接；
:hover 选择鼠标指针移入链接；
:active 被激活的链接，即按下单击鼠标左键但未松开；
:focus 选择获取焦点的输入字段；
######（2）结构化伪类：
- :not 否定伪类，用于匹配不符合参数选择器的元素；
- :first-child匹配元素的第一个子元素；
- :last-child 匹配元素的最后一个子元素；
- first-of-type 匹配属于其父元素的首个特定类型的子元素的每个元素；
- :last-of-type 匹配元素的最后一个子元素；
- :nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数（an+b最大数为匹配元素的个数）；
- :nth-last-child :nth-last-child与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的；
- :nth-of-type :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素；
- :nth-last-type :nth-last-of-type与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的；
- :only-child 当元素是其父元素中唯一一个子元素时。
- :only-child匹配该元素； :only-of-type 当元素是其父元素中唯一一个特定类型的子元素时，
- :only-child匹配该元素；
- :target 当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素；
（3）表单相关伪类：
- :checked 匹配被选中的input元素，这个input元素包括radio和checkbox；
- :default 匹配默认选中的元素，例如：提交按钮总是表单的默认按钮；
- :disabled 匹配禁用的表单元素；
- :empty 匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素；
- :enabled 匹配没有设置disabled属性的表单元素；
- :in-range 匹配在指定区域内元素；
- :out-of-range 与:in-range相反，它匹配不在指定区域内的元素；
- :indeterminate indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时，
- :indeterminate匹配该组中所有的单选框或复选框； :valid 匹配条件验证正确的表单元素；
- :invalid 与:valid相反，匹配条件验证错误的表单元素；
- :optional 匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性；
- :required 匹配设置了required属性的表单元素；
- :read-write 匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态；
- :scope(处于试验阶段) 匹配处于style作用域下的元素。当style没有设置scope属性时，style内的样式会对整个html起作用；
伪元素
- ::before/:before 在某个元素之前插入一些内容；
- ::after/:after 在某个元素之后插入一些内容；
- ::first-letter/:first-letter 为某个元素中的文字的首字母或第一个字使用样式；
- ::first-line/:first-line 为某个元素的第一行文字使用样式
- ::selection 匹配用户被用户选中或者处于高亮状态的部分；
- ::placeholder 匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效；
- ::backdrop(处于试验阶段) | 用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式；
