【CSS】伪类选择器有什么用？有哪些是常用的伪类？
大家好，我是翼同学！
目录
- 1️⃣<font color='purple'>前言
- 2️⃣<font color='purple'>链接伪类选择器
- 🌱a:link
- 🌱a:hover
- 🌱a:visited
- 🌱a:active
- 🖊️注意事项
- 3️⃣<font color='purple'>其他伪类
- 4️⃣<font color='purple'>写在最后
1️⃣前言
今天刚学了伪类选择器，记录一下以便复习。
什么是伪类选择器？伪类选择器可以根据标签的不同状态可以设置不同的样式，用于添加特殊效果或者动态状态等，其书写特点是用冒号“:”表示。
具体语法如下：
普通选择器:伪类选择器 { 样式表明; }
伪类选择器有很多，本篇笔记重点记录用于修饰链接的伪类选择器。
2️⃣链接伪类选择器
我们页面中的超链接其实有四种状态，如下所示：
- 状态一：链接未被访问的状态
- 状态二：鼠标滑过链接的状态
- 状态三：链接已被访问的状态
- 状态四：鼠标按下链接但并未松开时的状态
这四种状态分别对应着四种伪类选择器。
我们可以根据需求来修改链接不同状态下的样式。
🌱a:link
不同浏览器对于未被访问的链接都有默认的样式美化，默认情况下，未被访问的链接，其样式为：带有下划线的蓝色文本。以谷歌浏览器为例，看下图。
此时若要修改未被访问的链接的样式，则可以使用a:link伪类，举个例子：
a:link {
color:red;
}
效果如下所示：
🌱a:hover
:hover伪类选择器的使用频率较高。具体怎么用呢？
当我们浏览一些网页，鼠标悬停在某个链接文本上时，该链接就会发生样式改变。这种效果就是用:hover伪类实现的。
举个例子：
a:hover {
color: red;
}
链接文本的默认下是蓝色的，通过CSS样式设置为，当鼠标悬停在链接上时变为红色。
效果如下：
🌱a:visited
在网页中，对于已经访问过的链接，浏览器默认样式显示为：带有下划线的紫色文本。
如下所示：
学完a:visited伪类后，我们可以根据需求设置已被访问的链接样式。
举个例子，我们将访问过后的链接呈现为绿色，如下所示：
a:visited {
color: green;
}
🌱a:active
怎么理解这个状态下的链接呢？
简单的说就是鼠标按下链接的同时并未松开手，此时处于点击链接的状态。
默认情况下该状态为红色。
举个例子，要求当鼠标按下链接不放开时，链接表现为黑色，代码如下：
a:active {
color:black;
}
效果为：
🖊️注意事项
使用链接伪类选择器时，需要注意的是定义顺序。
简单的说，当有多个链接伪类选择器需要被定义时，有一定的顺序要求。
具体如下：
: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️⃣写在最后
好了，今天的笔记就到这里。