CSS伪类选择器详细讲解

前言
伪类选择器在CSS中起到的作用可以说是至关重要的，如果CSS没有伪类选择器，有很多效果都要借助js来完成，这样不仅代码量增加，维护起来你难度也大。这样程序员的工作量大，也违背了CSS诞生的作用，就是提高开发效率，在同等的世间里完成更高质量的开发。

一篇文章让大家对CSS伪类有个全新的认识，相信有不少人应该有过一定的底子，虽然我写这篇文章是为了小白对CSS3伪类有个客观且全新的了解，不过对于入门的同学也用一定的作用，这篇文章有很多实用的用法可能在以前的学习中很少遇到以及见都没见过，对于这类同学们可以快速浏览看完，对于以前没遇到过得可以上手练练。对于大神级别的大佬，如果我这篇文章写得不好或者哪没写好写错的请给予建议。

虽然我这篇文章是零基础小白教程，可同学们也应该认真对待。看完要勤加练习，不然都会忘光的，所谓“温故而知新”，对于编程而言也同样适用。这里推荐个可以随时随地学编程的官网，旗下还有APP可以随时随地编程。

w3school链接：w3school

正文

伪类选择器包括伪类和伪类对象选择器，伪类选择器以冒号( : )作为前缀标识符。 冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪类对象名，冒号前后没有空格，否则将认为类选择器，如图所示。

下面表格包含了大部分伪类选择器：

伪类选择器
动态伪类
:link

链接没有被访问前的样式效果
:visited 链接被访问后的样式效果
:hover 鼠标悬停在元素上面时的样式效果
:active 点击元素时的样式效果，即按下鼠标左键时发生的样式
:focus 用于元素成为焦点时的样式效果，常用与表单元素
结构伪类
:first-child 选择某个元素下的第一个子元素
:last-child 选择某个元素下的最后一个子元素
:nth-child() 选择某个元素下的一个或多个特定的子元素
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从后往前数
:nth-of-type() 选择指定的元素
:nth-last-of-type() 选择指定的元素，从后往前数
:first-of-type 选择一个父级元素下的第一个同类型子元素
:last-of-type 选择一个父级元素下的第一个同类型子元素，从后往前数
:only-child 选择的元素是它父元素的唯一 一个子元素
:only-of-type 选择一个元素是上级元素下唯一相同类型的子元素
:empty 选择的元素里面没有任何内容（空标签）
否定伪类
:not() 排查或者过滤掉特定元素
状态伪类
:enabled 选择匹配指定范围内所有可用UI(用户界面)元素
:disabled 选择匹配指定范围内所有不可用UI(用户界面)元素
:checked 选择匹配指定范围内所有可用UI(用户界面)元素
目标伪类
:target 选择匹配父元素的所有元素，且匹配元素被相关URL指向
-------------有很多伪类选择器存在于IE低版本兼容性问题，在练习中不建议使用IE预览

味蕾选择器.
动态伪类
:link	链接没有被访问前的样式效果
:visited	链接被访问后的样式效果
:hover	鼠标悬停在元素上面时的样式效果
:active	点击元素时的样式效果，即按下鼠标左键时发生的样式
:focus	用于元素成为焦点时的样式效果，常用与表单元素
==结构伪类 ==
:first-child	选择某个元素下的第一个子元素
:last-child 选择某个元素下的最后一个子元素
:nth-child()	选择某个元素下的一个或多个特定的子元素
:nth-last-child()
动态伪类	选择某个元素的一个或多个特定的子元素，从后往前数
:nth-of-type()	选择指定的元素
:nth-last-of-type()	选择指定的元素，从后往前数
:first-of-type	选择一个父级元素下的第一个同类型子元素
:last-of-type	选择一个父级元素下的第一个同类型子元素，从后往前数
:only-child	选择的元素是它父元素的唯一 一个子元素
:only-of-type	选择一个元素是上级元素下唯一相同类型的子元素
:empty	选择的元素里面没有任何内容（空标签）
否定伪类
:not()	排查或者过滤掉特定元素
状态伪类	–
:enabled	选择匹配指定范围内所有可用UI(用户界面)元素
:disabled	选择匹配指定范围内所有不可用UI(用户界面)元素
–	–
:checked	选择匹配指定范围内所有可用UI(用户界面)元素
目标伪类
:target	选择匹配父元素的所有元素，且匹配元素被相关URL指向
-------------有很多伪类选择器存在于IE低版本兼容性问题，在练习中不建议使用IE预览