目錄
- 一、介紹
- 二、常用種類
- 三、案例實現
- 案例一：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>
效果
)