本文章为非原创文章，内容参考自总结伪类和伪元素，仅作学习参考使用，如有问题，请随时联系我删除

伪类和伪元素

为什么引入伪类和为元素

css引入伪类和伪元素概念是为了格式化文档树以外的信息，即不在DOM文档中的部分。他们的区别在于：伪元素是创造了新的元素，但是伪类没有

伪类

伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为动态变化的。比如说，用户鼠标悬停在指定的元素时，我们可以用hover来描述该元素的状态，为其添加该状态下的样式。

伪类-结构

1. :link 选择未访问的链接
2. :visited 选择已访问的链接
3. :hover 选择鼠标悬停的元素
4. :active 选择活动的链接
5. :focus 选择获取焦点的字段

伪类-结构化

1. :not 一个否定伪类，用于匹配不符合参数选择器的元素
2. :first-child 匹配元素的第一个子元素
3. :last-child 匹配元素的最后一个子元素
4. :first-of-type 表示一组兄弟元素中其类型的第一个元素
5. :last-of-type 表示一组兄弟元素中其类型的最后一个元素
6. :nth-child 根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数

    2n+1匹配位置为1,3,5,7...的元素 你可以用odd替换奇数行，even代替偶数行

7. :nth-last-child 与:nth-child相似，不同之处在于它从最后一个子元素开始计数
8. :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素
9. :nth-last-type 与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数 的。
10. :only-child 当元素是其父元素中唯一的子元素时，:only-child匹配该元素
11. :only-of-type 当元素是其父元素中唯一特定类型的子元素时，:only-child匹配该元素
12. :target 当url带有瞄名称，指向文档内某个具体的元素时:target匹配该元素

伪类-表单元素

1. :checked 匹配被选中的input元素，这个input元素包裹radio和checkbox.
2. :default 匹配默认选中的元素
3. :disabled 匹配禁用的表单元素
4. :empty 匹配没有子元素的元素，如果元素中含有文本节点，html元素或者一个空格，则:empty不能匹配这个元素
5. :enabled 匹配没有设置disabled属性的表单元素
6. :in-range 匹配在指定区域内元素，
7. :out-of-range 匹配不在指定区域内的元素
8. :indetermimate 当某组中的单选框或复选框还没有选取状态时，：indeterminate匹配该组中所有的单选框或复选框
9. :valid 匹配条件验证正确的表单元素
10. :invalid 匹配提交验证错误的表单元素
11. :optional :required匹配设置有无设置required属性的表单元素
12. :read-only 匹配设置了只读属性的元素
13. ：read-write匹配处于编辑状态的元素

伪类-其他相关

1. :root 匹配文档的跟元素
2. :fullscreen 匹配处于全屏模式下的元素

伪元素

伪元素可以为用户创建一些不在DOM文档中的元素，并为其添加样式。比如说，我们可以通过before来在一个元素之前添加一些文本。

伪元素有时候使用双冒号为不是一个冒号，css3为了区分伪类和伪元素，要求使用双冒号表示伪元素，大多数浏览器都支持这两个值。

1. :before 在被选择元素之前插入内容，需要content属性指定要插入的内容。被插入的内容实际上不存在文档树中。
2. :after 与before，在被选择元素之后插入内容
3. :first-letter 匹配元素中文本的首字母
4. :first-line 匹配元素中第一行的文本，只能用在块元素中，不能用于内联元素中
5. ::selection 匹配被用户选择或者处于高亮的部分，该元素支支持双冒号的形式
6. ::placeholder 匹配占位符的文本，只有元素设置placeholder属性时改为元素才生效。