【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️⃣其他伪类

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

• 伪类记录：

• 举例说明：

4️⃣写在最后

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