携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

1️⃣前言

今天刚学了伪类选择器，记录一下以便复习。

伪类选择器有什么用？

伪类选择器可以根据标签的不同状态可以设置不同的样式，其书写特点是用冒号“:”表示。

具体语法如下：

普通选择器:伪类 { 样式表明; }

伪类选择器有很多，本篇笔记重点记录用于修饰链接的伪类选择器。

2️⃣链接伪类选择器

网页中的超链接其实有四种状态，如下所示：

状态一：链接未被访问的状态；
状态二：鼠标滑过链接的状态；
状态三：鼠标按下链接但并未松开时的状态；
状态四：链接已被访问的状态。

这四种状态分别对应着四种伪类选择器，我们可以根据需求来修改链接不同状态下的样式。

🌱a:link

不同浏览器对于未被访问的链接都有默认的样式美化。

默认情况下，未被访问的链接，样式为：带有下划线的蓝色文本。

以谷歌浏览器为例，看下图。

此时若要修改未被访问的链接的样式，则可以使用a:link伪类，举个例子：

a:link {
    color:red;
}

效果如下所示：

🌱a:hover

:hover伪类选择器的使用频率较高。具体怎么用呢？

当我们浏览一些网页，鼠标悬停在某个链接文本上时，该链接就会发生样式改变。这种效果就是用:hover伪类实现的。

举个例子：

a:hover {
    color: red;
}

链接文本的默认下是蓝色的，通过CSS样式设置为，当鼠标悬停在链接上时变为红色。

效果如下：

小结：

:hover伪类可以在任何伪元素上使用。
其用途是当光标（鼠标指针）悬停在元素上时提供关联的样式。

🌱a:visited

在网页中，对于已经访问过的链接，浏览器默认样式显示为：带有下划线的紫色文本。

如下所示：

未被访问.gif

学完a:visited伪类后，我们可以根据需求设置已被访问的链接样式。

举个例子，我们将访问过后的链接呈现为绿色，代码如下：

a:visited {
    color: green;
}

效果：

已经访问.gif

🌱a:active

怎么理解这个状态下的链接呢？

简单的说就是鼠标按下链接的同时并未松开手，此时处于点击链接的状态。默认情况下该状态为红色。

举个例子，要求当鼠标按下链接不放开时，链接表现为黑色，代码如下：

a:active {
    color:black;
}

效果为：

已经访问.gif

🖊️注意事项

使用链接伪类选择器时，需要注意的是定义顺序。

简单的说，当有多个链接伪类选择器需要被定义时，有一定的顺序要求。

具体如下：

:hover必须位于:link和:visited之后
:active必须位于:hover之后

因此，当我们需要设置多个链接伪类选择器时，需要注意定义的先后顺序。

举个例子：

a:link {
	...
}
a:visited {
	...
}
a:hover {
	...
}
a:active {
	...
}

3️⃣其他伪类

事实上，伪类选择器有很多，除了需要掌握的链接伪类，还有其他伪类可以学习。

现用两个表格记录一下，方便复习：

伪类	含义
`:root`	匹配文档根元素（也就是`<html>`）
`:empty`	匹配空内容的所有指定标签
`:not(n)`	匹配非指定元素n的每个元素
`:focus`	匹配获得焦点（光标）的元素
`:first-child`	匹配指定父元素下的第一个子元素
`:last-child`	匹配指定父元素下的最后一个子元素
`:nth-child(n)`	匹配指定元素下的第`n`个子元素
`:default`	匹配标签中的默认元素

实例	解析
`:root { background:skyblue;}`	将整个文档的背景色改为蓝色
`p:empty`	选取所有空内容的`<p>`标签
`:not(p){ ... }`	匹配所有不是`<p>`标签的标签
`input:focus {background-color:skyblue;}`	鼠标点击后，文本框呈现蓝色背景
`div p:first-child { ... }`	匹配`<div>`元素下的第一个`<p>`元素
`div p:last-child { ... }`	匹配`<div>`元素下的最后一个`<p>`元素
`div p:nth-child(3) { ... }`	匹配`<div>`元素下的第3个`<p>`元素
`:default`伪类可用于哪些标签？	`<button>`、`<input type="checkbox">`、`<input type="radio">`、`<option>`

4️⃣写在最后

好了，今天的笔记就到这里。

【CSS】伪类选择器有什么用？有哪些是常用的伪类？