【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器

这是【CSS 教程系列第 12 篇】，如果觉得有用的话，欢迎关注专栏。

CSS 的选择器有很多，常用的有 元素选择器、id 选择器、class 选择器、后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器、通配符选择器 等。

本篇博客说的是伪类选择器，详细内容如下

一：伪类选择器

作用 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，比如可以选择第 1 个，第 n 个元素。

为什么叫伪类选择器 伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的 id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式。

当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

1：写法

首先写上你用到的选择器，然后在其后面加一个英文冒号":"，在冒号后面写上用到的伪元素即可。如 a:hover

伪元素就是 CSS 用来添加一些选择器的特殊效果。

2：举例说明

这里我以"锚伪类"说一下伪类选择器的用法。

我们知道，链接有四种状态，分别为 未访问的链接、已访问的链接、鼠标悬停到链接以及选定的链接。

这里我写一个 a 链接，看一下这四种状态，CSS 代码如下

	a:link {color: black;}    /*未访问的链接显示 "黑色"*/
	a:visited {color: green;} /*已访问的链接显示 "绿色"*/
	a:hover {color: red;}     /*鼠标悬停到链接显示 "红色"*/
	a:active {color: yellow;} /*选定的链接显示 "黄色"*/

让我们通过 gif 来看一下伪类选择器的演示效果，如下所示 需要说明一下，你访问过的链接，即使你刷新浏览器颜色也不会回到 a:link 时的黑色，你需要把该链接对应的 cookies 以及历史记录全部清理掉才可以。

特别注意 这四个伪元素不是随便写的，其中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。而 a:active 也必须被置于 a:hover 之后，才是有效的。

这四个伪元素的顺序不需要去死记，可以巧记为 " l v 包包非常 ha o "，红色英文字母取的是每个伪元素的首字母。

3：搭配其它选择器

并不是只有 a 元素才可以用伪类选择器，你也可以用其它元素，后面写上伪元素就行了。

这里我举一个伪类选择器搭配类选择器的例子，要实现的功能也很简单，就是鼠标经过文本时，颜色改为蓝色。

HTML 代码如下

	不必每分钟都学习，但求学习中每分钟都有收获

CSS 代码如下

	.myClass:hover{color: blue;}

浏览器运行效果如下

4：所有 CSS 伪类/元素

这里参考 菜鸟教程的伪类/伪元素教程 ，我重新整理了一下资料，将原来举例中的"同一元素的选择器"整理到同一个表格。

再次声明：不是说在这个表格的只能这个元素才能用，我这边只是整理了原链接的例子，特此强调。

表格一：a 元素 序号选择器示例功能说明1linka: link选择所有未访问链接2visiteda: visited选择所有访问过的链接3activea: active选择正在活动的链接4hovera: hover把鼠标放在链接上的状态 表格二：p 元素 序号选择器示例功能说明1emptyp: empty选择所有没有子元素的 p 元素2first-of-typep: first-of-type选择的每个 p 元素是其父元素的第一个 p 元素3last-of-typep: last-of-type选择的每个 p 元素是其母元素的最后一个 p 元素4last-childp: last-child选择所有 p 元素的最后一个子元素5not(selector):not(p)选择所有 p 以外的元素6nth-child(n)p: nth-child(2)选择所有 p 元素的父元素的第二个子元素7nth-last-child(n)p: nth-last-child(2)选择所有p元素倒数的第二个子元素8nth-last-of-type(n)p: nth-last-of-type(2)选择所有 p 元素倒数第二个为 p 的子元素9nth-of-type(n)p: nth-of-type(2)选择所有 p 元素第二个为 p 的子元素10only-of-typep: only-of-type选择所有仅有一个子元素为 p 的元素11only-childp: only-child选择所有仅有一个子元素的 p 元素12first-letterp : first-letter选择每个 p 元素的第一个字母13first-linep: first-line选择每个 p 元素的第一行14first-childp:first-child选择器匹配属于任意元素的第一个子元素的 p 元素15beforep: before在每个 p 元素之前插入内容16afterp: after在每个 p 元素之后插入内容17lang(language)p:lang(it)为 p 元素的 lang 属性选择一个开始值 表格三：input 元素 序号选择器示例功能说明1checkedinput: checked选择所有"选中"的表单元素2disabledinput: disabled选择所有"禁用"的表单元素3enabledinput: enabled选择所有"启用"的表单元素4in-rangeinput: in-range选择元素指定范围內的值5invalidinput: invalid选择所有无效的元素6optionalinput: optional选择没有"required"的元素属性7out-of-rangeinput: out-of-range选择指定范围以外的值的元素属性8read-onlyinput: read-only选择"只读"属性的元素属性9read-writeinput: read-write选择"没有只读"属性的元素属性10requiredinput: required选择有"required"属性指定的元素属性11validinput: valid选择所有有效值的属性12focusinput:focus选择元素输入后具有焦点 表格四：其它伪类 / 伪元素 序号选择器示例功能说明1rootroot选择文档的根元素2target#news: target选择当前活动 #news 元素(点击 URL 包含锚的名字)

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。 最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。