CSS - Pseudo-classes(伪类选择器)

一、介绍

CSS 伪类（Pseudo-classes）用于定义元素的特定状态或结构位置，从而允许你为这些特殊场景添加样式。伪类以冒号 : 开头，附加在选择器后

/* 举例 */
a:link{color: #fff;background-color: aqua;
}

二、常用种类

伪类	含义
:link	选中未访问的链接
:visited	选中已访问的链接
:hover	鼠标悬停在元素上时
:active	元素被激活（如鼠标按下元素）时
:focus	元素获得焦点（如表单输入框被选中）
:disabled	禁用的表单元素
:checked	被选中的复选框或单选按钮
:first-child	元素的第一个子元素
:last-child	元素的最后一个子元素
:first-of-type	选中第一个指定类型的子元素
:last-of-type	选中最后一个指定类型的子元素
:nth-child(n)	选中第 n 个子元素（支持公式如 2n+1）
:nth-of-type(n)	选中该类型元素的第 n 个

三、案例实现

案例一：a标签使用link/visited/hover/active

当我们同时使用多种选中样式的伪类时，生效的顺序十分重要！！！这里通过爱恨法则来加快记忆

爱恨法则 Love Hate -> link visited hover active

效果代码：hover和active需要鼠标移动至元素/鼠标按下激活元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>.nav a{width: 100px;height: 50px;text-decoration: none;background-color: antiquewhite;}/*伪类顺序： 爱恨法则 Love Hate -> link visited hover active  *//* line 选中未访问过的超链接 */.nav a:link{color: #fff;background-color: aqua;}/* visited 选中访问过的超链接 */.nav a:visited{background-color: aquamarine;}/* hover 选中鼠标移入的元素 */.nav a:hover{background-color: azure;}/* active 选中鼠标按下的元素 */.nav a:active{color: #fff;background-color: red;}</style>
</head>
<body><div class="nav"><a href="https://gitee.com/">gitee</a><a href="https://www.bilibili.com">哔哩哔哩</a><a href="https://ys.mihoyo.com/">原神</a><a href="https://chat.deepseek.com/">deepseek</a></div>
</body>
</html>

效果
在这里插入图片描述

案例二：表单元素使用focus/disabled

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>form input:focus{outline: 1px solid red;}form button:disabled{cursor: not-allowed;}</style>
</head>
<body><form><input type="text" placeholder="一步一步向上爬"><button disabled>成绩加一</button></form>
</body>
</html>

focus:表单聚焦
disabled：表单元素禁用，这里改动的是鼠标样式
效果
在这里插入图片描述

案例三、通过其余伪类实现元素灵活选中

注意！！！:first-child 的匹配规则- - last-child同理

严格检查位置：只有同时满足以下两个条件时才生效：
- 元素是父容器的第一个子元素。
- 元素类型与选择器指定的标签匹配

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>p:first-child{color: red;}</style>
</head>
<body><div> <!-- 父元素 --><span>span:灵活的选择器</span> <!-- 第一个为span --><div> <!-- 父元素 --><p>p:分割线</p> <!-- 第一个为p，满足条件 --></div><div> <!-- 父元素 --><span>span</span> <!-- 第一个为span --><p>p:分割线</p></div></div>
</body>
</html>

效果
在这里插入图片描述

案例：first-of-type

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>p:first-of-type{color: red;}</style>
</head>
<body><div><span>灵活的选择器</span><div><p>分割线</p></div><div><span>111</span><p>分割线</p></div></div></div>
</body>
</html>

案例：实现斑马线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>.list{width: 400px;outline: 1px solid red;}.list p{margin: 0;}.list p:first-child{text-align: center;font-size: 32px;} .list p:nth-child(2n+3){background-color: hsl(160, 88%, 80%);}.list p:nth-child(2n){background-color: aqua;}</style>
</head>
<body><div class="list"><p><span>你好</span></p><p><span>相信自己，你一定可以的，不要忘记休息</span></p><p><span>相信自己，你一定可以的，不要忘记休息</span></p><p><span>相信自己，你一定可以的，不要忘记休息</span></p><p><span>相信自己，你一定可以的，不要忘记休息</span></p><p><span>相信自己，你一定可以的，不要忘记休息</span></p><p><span>相信自己，你一定可以的，不要忘记休息</span></p><p><span>相信自己，你一定可以的，不要忘记休息</span></p></div>
</body>
</html>