CSS中的伪类（Pseudo-classes）详解

描述
伪类是CSS中用于选择元素特定状态的关键字，例如鼠标悬停（:hover）、焦点状态（:focus）、第一个子元素（:first-child）等。它们不依赖于HTML中的类或ID，而是基于元素在文档树中的行为或位置动态应用样式。伪类以冒号（:）开头，与选择器结合使用，用于增强交互性和样式控制。

一、伪类的基本语法与分类

语法：

selector:pseudo-class {
  property: value;
}

示例：

a:hover {
  color: red;
}

分类：
伪类可根据功能分为以下几类：

1. 状态类：依赖于用户交互或元素状态（如:hover、:active、:checked）。
2. 结构类：基于元素在文档中的位置（如:first-child、:nth-child()）。
3. 表单类：针对表单元素的状态（如:valid、:required）。
4. 其他类：如链接状态（:link、:visited）等。

二、常用伪类详解与示例

1. 状态类伪类

• :hover
  作用：鼠标悬停在元素上时触发。
  示例：

  button:hover {
    background-color: #555;
  }
  

• :active
  作用：元素被激活（如鼠标按下未释放）时生效。
  示例：

  button:active {
    transform: scale(0.98);
  }
  

• :focus
  作用：元素获得焦点时（如输入框被点击）。
  示例：

  input:focus {
    outline: 2px solid blue;
  }
  

2. 结构类伪类

• :first-child 与 :last-child
  作用：选择父元素下第一个或最后一个子元素。
  示例：

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  

  li:first-child {
    font-weight: bold; /* 仅"Item 1"加粗 */
  }
  

• :nth-child()
  作用：通过公式选择特定位置的子元素。
  示例：

  li:nth-child(2n) { /* 选择偶数项 */
    background: #f0f0f0;
  }
  li:nth-child(3) { /* 选择第3个li */
    color: red;
  }
  

3. 表单类伪类

• :checked
  作用：匹配被选中的单选按钮或复选框。
  示例：

  input[type="checkbox"]:checked {
    accent-color: green;
  }
  

• :valid 与 :invalid
  作用：根据输入内容验证状态设置样式。
  示例：

  input:valid {
    border-color: green;
  }
  input:invalid {
    border-color: red;
  }
  

三、伪类的组合与注意事项

1. 组合使用

多个伪类可同时应用，但需注意顺序：

a:link:hover { /* 未访问链接且悬停 */
  color: purple;
}

顺序规则：链接相关伪类需按:link → :visited → :hover → :active顺序（LoVe-HAte口诀）。

2. 注意事项

• 伪类不可独立存在，必须附加到选择器后（如div:hover）。
• 部分伪类仅适用于特定元素（如:checked仅用于<input>）。
• 动态伪类（如:hover）在移动端需通过触摸事件触发。

四、实战案例：表格隔行变色与交互增强

目标：为表格添加隔行变色，且鼠标悬停时高亮当前行。
HTML结构：

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

CSS代码：

tr:nth-child(even) {
  background: #f9f9f9; /* 偶数行浅灰色 */
}
tr:hover {
  background: #e0f7fa; /* 悬停时浅蓝色 */
}

五、伪类与伪元素的区别

• 伪类：选择特定状态的元素（单冒号:）。
• 伪元素：选择元素的特定部分（双冒号::，如::before）。
  示例对比：

p:first-child { /* 选择作为第一个子元素的<p> */
  color: blue;
}
p::first-line { /* 选择<p>的第一行文本 */
  font-weight: bold;
}

总结：伪类是CSS中动态控制样式的核心工具，通过理解其分类和适用场景，可显著提升页面交互性与可维护性。