共计 7219 个字符，预计需要花费 19 分钟才能阅读完成。
前言
伪类选择器在 CSS 中起到的作用可以说是至关重要的，如果 CSS 没有伪类选择器，有很多效果都要借助 js 来完成，这样不仅代码量增加，维护起来你难度也大。这样程序员的工作量大，也违背了 CSS 诞生的作用，就是提高开发效率，在同等的世间里完成更高质量的开发。
一篇文章让大家对 CSS 伪类有个全新的认识，相信有不少人应该有过一定的底子，虽然我写这篇文章是为了小白对 CSS3 伪类有个客观且全新的了解，不过对于入门的同学也用一定的作用，这篇文章有很多实用的用法可能在以前的学习中很少遇到以及见都没见过，对于这类同学们可以快速浏览看完，对于以前没遇到过得可以上手练练。对于大神级别的大佬，如果我这篇文章写得不好或者哪没写好写错的请给予建议。
虽然我这篇文章是零基础小白教程，可同学们也应该认真对待。看完要勤加练习，不然都会忘光的，所谓“温故而知新”，对于编程而言也同样适用。这里推荐个可以随时随地学编程的官网，旗下还有 APP 可以随时随地编程。w3school
https://www.w3school.com.cn
正文
伪类选择器包括伪类和伪类对象选择器，伪类选择器以冒号 (:) 作为前缀标识符。冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪类对象名，冒号前后没有空格，否则将认为类选择器，如图所示。
下面表格包含了大部分伪类选择器：
| 伪类选择器 | |
|---|---|
| 动态伪类 | |
|
: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 预览 | |
动态伪类
动态伪类是一类行为类样式，这些样式不存在于 HTML 中，只有当用户于页面进行交互才能体现出来。动态伪类伪类选择器包括两种形式：
锚点伪类，这是一种在链接中最常见的样式，如:link、:visited。
行为伪类，也成用户操作伪类，如:hover、:active、:focus。
为了教学简单，我写为内嵌式，在实际应用中不建议各位使用内嵌式。
:link
设置超链接在跳转前的样式，用法如下：
跳转想要设置上面超链接链接前的样式为字体颜色红色、无下滑线，可以这样设置。
效果如图所示：
:visited
这伪类于:link 刚好相反，:link 是链接前的样式，而:visited 是链接后的样式，也就是访问过后的超链接样式。
跳转设置它访问过后样式为有下划线，字体颜色为绿色，代码如下：
效果如图所示：
:link 伪类效果会被:visited 伪类效果覆盖掉，网上的教程多如牛毛，什么清除浏览器数据什么书写格式，其实不然，是因为链接地址的书写问题，下面我来详细介绍下怎么解决这个问题。
在日常的学习中可能大家都是把链接前后一起书写的，方便快捷，还符合语义性；这就导致很多同学不知道这两个伪类有个覆盖效果的问题。下面的例子可以帮助你们有个大概的了解：
根目录图：
如果 HTML.html 这个页面要链接到 login.html 页面大多同学都是这样书写地址的：跳转，由于同级的缘故；不过这样书写时要设置不同的:link/:visited 效果就会出现:visited 效果覆盖:link 的效果。怎么解决呢？很简单书写上全地址就行了，可这有人就会问了你这不是全地址吗？也是，可是不全啊，网站目录的搭建大家可能很少了解根目录的概念，这里只要从根目录开始就可以了，根目录在网页书写的符号是“/”, 只要是链接页面从根目录开始写就不会出现伪类覆盖的问题。这么说大家可能会有点蒙，那我就上图来演示：
上面这段代码就是 HTML 页面链接到 login 页面的跳转链接，运行后效果图是这样的：
会发现:visited 效果覆盖掉:link 的效果，加上根目录就可以了：
就可以完美解决问题了，效果图如下：
:hover
:hover 伪类选择器用于用户把鼠标移动到元素上面时的样式效果。不仅用于超链接还可以适用于很多元素上，比如说按钮，当你把鼠标移动到上面的时候，你会发现按钮的北背景色变深色了，或者改变颜色了，这就是通过:hover 来完成的，当然还有其他方法进行设置，可毫无疑问:hover 是最简单快捷的方法。这里我先介绍在超链接的使用技巧，在进行扩展使用它来更改鼠标移动到元素上面后的效果。
如果你想要在鼠标悬停在 a 标签元素上，让元素改变颜色，代码如下：
鼠标移动到元素上的效果图：
扩展
结构代码如下：
效果图如下：
我想要的效果是，当鼠标移动到 div 元素上时，背景色改为黑色、字体改为白色，代码如下：
这里我增加了 transition 属性是 CSS3 的过渡属性，目的是为了效果切换之间不那么生硬。由于这篇是介绍伪类选择器的这里就不展开介绍了，有兴趣的小伙伴们可以自行去查找教程。
鼠标悬停在 div 元素上效果图：
:active
:active 用于用户单击元素时的样式效果。多用于表单控件，当用户点击时有个按下按钮的效果。同理这个我放在扩展区域。
当点击超链接我想要更改超链接字体的颜色，实现代码如下：
点击超链接效果图：
扩展
这个实例是用 div 模仿一个按钮，html 自带的按钮样式一言难尽，模仿的好进行样式控制。
代码如下：
样式效果：
点击按钮后样式效果：
:focus
:focus 多用元素成为焦点时的样式效果，这个经常用与表单控件元素上。
结构代码：
当想 input 获取焦点后，背景色为 #CCC，实现代码：
input 获取焦点后效果图：
可以看到 input 获取焦点后背景色改为目标颜色的样式效果了。
注意事项
- 上述伪类选择器遵循顺序原则，也就是 link 到 visited 到 hover 再到 active 伪类。
- hover 和 active 又被列入到用户行为伪类中。
结构伪类
结构伪类是 CSS3 新设计的选择器，它利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内 class 属性和 id 属性的定义，使得文档更加简洁。
结构伪类有很多种形式，这些形式的用法是固定的，但可以灵活运用，以便设计各种特殊的样式效果。
:first-child
:first-child 伪类结构可以用来选择某元素的第一个元素。
结构代码：
上面代码要控制 div 下的第一个 p 标签的样式，如果是以前没有接触过结构伪类的就只能使用类名和 id 名进行控制了，现在学到结构伪类了，就不必要在使用多余的类和 id，上述要求实现代码如下：
这样就可以实现控制 div 下的第一个 p 标签了，可如果页面多个上述的结构代码，可我只想控制第一个 div 旗下的第一个 p 标签呢？这个时候可以给 div 加个类名进行精准定位。
:last-child
:last-child 与:first-child 的使用方法一致，不过不同的是它是从后往前数的第一个元素。
选择的则是 div 子元素的倒数第一个 p 标签。
:nth-child()
:nth-child()是一个结构伪类元素，它可以选择某个元素包含的一个或多个特定的子元素。该函数有多种用法：
:nth-child(length);/* 参数是具体数字 */
:nth-child(n);/* 参数是 n,n 是从 0 开始计算 */
:nth-child(n*length)/* n 的倍数选择，n 从 0 开始算 */
:nth-child(n+length)/* 选择大于或等于 length 的元素 */
:nth-child(-n+length)/* 选择小与或等于 length 的元素 */
:nth-child(n*length+1)/* 表示隔几选一 */
在 nth-child()函数中，参数 length 为整数，n 表示一个从 0 开始的自然数。
:nth-child()可以定义值，值可以是整数，也可以是表达式，如上述代码所示，用来选择特定的子元素。
main div:nth-child(1) {}上述代码控制的是 main 主体标签下第一个 div 的标签，这用法在学习和开发中常用的用法。
table tr:nth-child(n){}上述代码所控制的是 table 表格标签下所有的 tr 元素，这很像一个 for 遍历，n 是逐渐+1 的；n 的取值是从 0 开始的，什么时候结束要根据文档的结构而定。在实际的运用中这样使用是选中所有的子元素。
table tr:nth-child(2n) {}上述代码控制的是 table 标签的 tr 元素，隔一选一，也就是选中偶数。
实现过程：
- 当 n =0，则 2n=0，表示没有选中任何元素；
- 当 n =1，则 2n=2，表示选择了第 2 个元素；
- 当 n =2，则 2n=4，表示选择了第 4 个元素；
以此类推。可用于控制表格的背景色，美化表格，可以做出 word 的美化表格效果。
上图效果，我简单写了下，就是使用上述的选择器选择可以很大程度的简化代码，还可以使表格样式更加好看。上述案例代码如下:
上述案例，仅供理解伪类选择器用法，如果想要很好看的样式效果，就需要自己构思了，我这里就不细讲了。
:nth-last-child()
它和:last-child 是近乎相同的都是从后面开始选，不过前者只能选最后的第一个元素，后者也只可以选择一个元素。不过如果你要选择最后第二个呢？显然:last-child 是用不了的，那这时就可以用它了，例如：
/*css*/
第一段
第二段
第三段
就可以选中
第二段
了。:nth-last-child()也有着:nth-child()一样的方法，用法一样，不过它是从后面开始算的。由于上面已经详细介绍过了，这李就不过多介绍，读者可以返回方面看看。
:nth-of-type()
:nth-of-type 用于匹配属于父元素的特定类型的第 n 个子元素
/*css*/
标题
第一段
第二段
第三段
上述代码，效果如下：
可以很直观的看到代码 div p:nth-of-type(2) 参数是 2，可效果是作用在第二个 p 标签的，它可以理解为自能选中 p:nth-of-type(2) 在选择器 (:) 冒号前面指定标签，只会选中指定类型的第 n 位，对于其他标签忽略不计。
:nth-last-of-child()
它的用法和上述的:nth-of-child()一样，也是用于匹配属于父元素的特定类型的第 n 个子元素。
这里就不在演示了，读者不理解可以返回上一选择器在理解理解。
:empty
:empty 选择器用来选择没有子元素或文本内容为空的所有元素，话不多说看案例：
效果如图所示：
代码：
/*css*/
这是一个段落
可以看到:empty 选择器是选择没有任何子元素和文本的标签，通俗点讲就是空标签。
否定伪类
:not()
:not()是排查或者过滤掉特定元素，案例：
效果：
代码：
/*css*/
第一个 a 标签
第二个 a 标签
第三个 a 标签
可以看出来 css 代码中我们给 a 标签去除下滑线，伪类:not(参数) 参数中我们用属性选择器选中 a 标签 class 属性为 nav_item 的标签，把它作为:not()的参数，而:not()是用于排查或者过滤掉特定元素的，所以 a 标签为 clanav_item" 的 a 标签没有被选中。
状态伪类
注释：本例只在 Opera 中正确地工作！
考虑到这篇选择器介绍主要面向的是初学者，所以这里就不在展开来讲了(有兴趣的读者可以去 W3C 官网或菜鸟教程进一步学习，了解下，官网的教程更加有语义性)，因为这些选择器在学习和开发中都不常用，所以大家了解有这些选择器就可以了，不必要纠结于这几个选择器，可能很多参与工作的程序员都不太清楚。
目标伪类
:target
:target 用于选择匹配父元素的所有元素，且匹配元素被相关 URL 指向，从字面上很难理解，直接上案例;
效果：
初始效果如图所示，当我们点击干饭链接时，就会跳转的干法链接链接的锚点区域显示出来，覆盖掉学习链接的内容；如图：
代码：
/*css*/
从代码结构上来看。我们可以看到 a 在这里是使用锚点链接，链接页面元素。我们先给 div 设置 display: none; 来隐藏 div，在同过:target 伪类来选择匹配父元素的所有元素，且匹配元素被相关 URL 指向，将 display: block; 当用户点击 a 超链接就会把 div 显示出来，它还可以实现背景图片的切换，读者可以思考下在怎么写，代码没有固定答案，子要把效果实现出来，就 ok 了，不过在实际开发中要满足语言的语义性；js 有一个 target 事件，效果有点类似，感兴趣的读者可以去查阅相关文件。
结尾
到这里 css 伪类就学完了，由于本人的学识有限，可能有很多伪类选择器没有介绍，有知道的人可以在下面留言讨论，技术就是在交流中会有事半功倍的起效。在结尾我要告诫大家“多练，多练，学会不代表会用，会用不代表熟练”在日新月异的互联网，如果你想在这个行业有一的一席之地就要不断学习，推荐可以去菜鸟教程，W3C 官网，以及 github 上去学习最新的知识。
本文借鉴书籍、网站：html+css+js 入门、w3c、菜鸟
原文地址: CSS 伪类选择器详细讲解
