7. CSS 伪类

本节目标：掌握常用伪类选择器，能根据元素状态和位置来设置样式。

什么是伪类

伪类（Pseudo-class）用来选择处于特定状态的元素。它不是真正的类，而是元素在某种条件下自动获得的状态。

语法格式：

selector:pseudo-class {
  property: value;
}

链接相关伪类

链接有四种状态，对应四个伪类：

/* 未访问的链接 */
a:link {
  color: red;
}

/* 已访问的链接 */
a:visited {
  color: green;
}

/* 鼠标悬停时 */
a:hover {
  color: magenta;
}

/* 点击瞬间 */
a:active {
  color: blue;
}

Note

顺序很重要！必须按 LVHA 顺序写：:link → :visited → :hover → :active。否则可能不生效。

交互状态伪类

除了链接，其他元素也有状态伪类：

/* 鼠标悬停 */
.button:hover {
  background-color: #2980b9;
}

/* 获得焦点时（如输入框被点击） */
input:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52,152,219,0.3);
}

/* 被点击时 */
.box:active {
  transform: scale(0.98);
}

:focus 在表单交互中特别常用，能提升用户体验。

结构性伪类

根据元素在文档树中的位置来选择：

:first-child 和 :last-child

/* 父元素的第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 父元素的最后一个子元素 */
li:last-child {
  border-bottom: none;
}

<ul>
  <li>第一项（加粗）</li>
  <li>第二项</li>
  <li>第三项（无下边框）</li>
</ul>

:nth-child()

按位置选择，非常灵活：

/* 第 2 个 li */
li:nth-child(2) {
  color: red;
}

/* 奇数项 */
li:nth-child(odd) {
  background: #f5f5f5;
}

/* 偶数项 */
li:nth-child(even) {
  background: #fff;
}

/* 前 3 项 */
li:nth-child(-n+3) {
  font-weight: bold;
}

/* 从第 4 项开始 */
li:nth-child(n+4) {
  opacity: 0.6;
}

Tip

nth-child 的参数支持 odd、even、数字、公式（2n、2n+1 等），是做斑马纹表格的利器。

:nth-of-type()

跟 :nth-child 类似，但只计算同类型的元素：

/* 第二个 <p> 标签（只数 p 的数量） */
p:nth-of-type(2) {
  color: blue;
}

:not()

反选，排除某些元素：

/* 除了最后一个 li，其他都有右边距 */
li:not(:last-child) {
  margin-right: 10px;
}

/* 除了 .active 的按钮，其他都半透明 */
.btn:not(.active) {
  opacity: 0.5;
}

表单相关伪类

/* 被选中的复选框/单选框 */
input:checked {
  accent-color: #3498db;
}

/* 禁用的输入框 */
input:disabled {
  background: #eee;
  cursor: not-allowed;
}

/* 必填项 */
input:required {
  border-left: 3px solid #e74c3c;
}

/* 输入值有效 */
input:valid {
  border-color: #2ecc71;
}

/* 输入值无效 */
input:invalid {
  border-color: #e74c3c;
}

伪类可以组合

伪类能跟其他选择器组合使用：

/* class="link" 的元素在悬停时 */
.link:hover {
  text-decoration: underline;
}

/* 第一个 p 标签悬停时 */
p:first-child:hover {
  background: #f0f0f0;
}

/* 非首项的 li 在悬停时 */
li:not(:first-child):hover {
  background: #fafafa;
}

完整示例：导航菜单

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>伪类示例</title>
  <style>
    /* 基础导航样式 */
    .nav {
      list-style: none;
      display: flex;
      gap: 0;
    }

    .nav a {
      display: block;
      padding: 12px 20px;
      text-decoration: none;
      color: #333;
      transition: all 0.3s;
    }

    /* 链接状态 */
    .nav a:link { color: #333; }
    .nav a:visited { color: #333; }
    .nav a:hover {
      background: #3498db;
      color: white;
    }
    .nav a:active {
      background: #2980b9;
    }

    /* 当前项 */
    .nav .active {
      background: #2c3e50;
      color: white;
    }

    /* 斑马纹列表 */
    .list li:nth-child(odd) {
      background: #f8f9fa;
    }
    .list li:nth-child(even) {
      background: #fff;
    }
    .list li:hover {
      background: #e3f2fd;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li><a href="#" class="active">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
  </ul>

  <ul class="list">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
  </ul>
</body>
</html>

常用伪类速查

伪类	作用
`:hover`	鼠标悬停
`:focus`	获得焦点
`:active`	被点击时
`:visited`	链接已访问
`:first-child`	第一个子元素
`:last-child`	最后一个子元素
`:nth-child(n)`	第 n 个子元素
`:nth-of-type(n)`	第 n 个同类型元素
`:not(selector)`	排除匹配的元素
`:checked`	被选中的表单元素
`:disabled`	禁用的元素
`:required`	必填项

学完这章你应该知道

伪类选择元素的状态或位置
链接伪类要按 LVHA 顺序写
:nth-child 可以做斑马纹、前 N 项等
:not() 是反向选择器
伪类可以跟其他选择器组合

下一章学伪元素，跟伪类很像但又有区别。