CSS - Pseudo-classes(伪类选择器)
目录
- 一、介绍
- 二、常用种类
- 三、案例实现
- 案例一：a标签使用link/visited/hover/active
- 案例二：表单元素使用focus/disabled
- 案例三、通过其余伪类实现元素灵活选中
一、介绍
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>
效果
