【CSS】伪类选择器有什么用？有哪些是常用的伪类？
1、写在前面
今天刚学了伪类选择器，记录一下以便复习。
伪类选择器可以根据标签的不同状态可以设置不同的样式，其书写特点是用冒号“:”表示。
具体语法如下：
伪类选择器有很多，本篇笔记重点记录用于修饰链接的伪类选择器。
2、链接伪类选择器
网页中的超链接其实有四种状态，如下所示：
状态一：链接未被访问的状态；
状态二：鼠标滑过链接的状态；
状态三：鼠标按下链接但并未松开时的状态；
状态四：链接已被访问的状态。
这四种状态分别对应着四种伪类选择器，我们可以根据需求来修改链接不同状态下的样式。
🌱a:link
不同浏览器对于未被访问的链接都有默认的样式美化。
默认情况下，未被访问的链接，样式为：带有下划线的蓝色文本。
以谷歌浏览器为例，看下图。
此时若要修改未被访问的链接的样式，则可以使用a:link伪类，举个例子：
效果如下所示：
🌱a:hover
:hover伪类选择器的使用频率较高。具体怎么用呢？
当我们浏览一些网页，鼠标悬停在某个链接文本上时，该链接就会发生样式改变。这种效果就是用:hover伪类实现的。
举个例子：
链接文本的默认下是蓝色的，通过 CSS 样式设置为，当鼠标悬停在链接上时变为红色。
效果如下：
小结：
:hover伪类可以在任何伪元素上使用。其用途是当光标（鼠标指针）悬停在元素上时提供关联的样式。
🌱a:visited
在网页中，对于已经访问过的链接，浏览器默认样式显示为：带有下划线的紫色文本。
如下所示：
学完a:visited伪类后，我们可以根据需求设置已被访问的链接样式。
举个例子，我们将访问过后的链接呈现为绿色，代码如下：
效果：
🌱a:active
怎么理解这个状态下的链接呢？
简单的说就是鼠标按下链接的同时并未松开手，此时处于点击链接的状态。默认情况下该状态为红色。
举个例子，要求当鼠标按下链接不放开时，链接表现为黑色，代码如下：
🖊️注意事项
使用链接伪类选择器时，需要注意的是定义顺序。
简单的说，当有多个链接伪类选择器需要被定义时，有一定的顺序要求。
具体如下：
:hover必须位于:link和:visited之后:active必须位于:hover之后
因此，当我们需要设置多个链接伪类选择器时，需要注意定义的先后顺序。
举个例子：
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、写在最后
好了，今天的笔记就到这里。
版权声明: 本文为 InfoQ 作者【翼同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/9b0aeaed54a439791444f5344】。文章转载请联系作者。
知行合一 2022.08.02 加入
@珠海科技学院
评论