网站开发备案费用百度推广天津总代理
目录
- 一、介绍
- 二、常用种类
- 三、案例实现
- 案例一：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>
效果
