CSS 伪类

伪类（pseudo-class）用来描述元素的特殊状态，比如"鼠标悬停时""第一个子元素""输入框聚焦时"，它不需要改动 HTML 就能为这些状态添加样式。善用伪类，交互效果和结构性样式都能事半功倍。

伪类的基本语法

伪类写在选择器后面，用单个冒号连接：

selector:pseudo-class {
  属性: 值;
}

a:hover { color: red; }   /* 鼠标悬停在链接上时 */
li:first-child { font-weight: bold; }   /* 第一个列表项 */
input:focus { border-color: blue; }     /* 输入框聚焦时 */

注意：CSS 里单个冒号的是伪类（:hover），两个冒号的是伪元素（::before），初学者容易混淆。

链接的四种状态

链接是伪类最经典的应用，它有四种交互状态：

a:link    { color: blue; }    /* 未访问的链接 */
a:visited { color: purple; }  /* 已访问过的链接 */
a:hover   { color: red; }     /* 鼠标悬停 */
a:active  { color: orange; }  /* 鼠标按下的瞬间 */

顺序要按"爱恨法则"书写：LVHA（link、visited、hover、active）。如果写反了，hover 效果可能被后面的规则覆盖而失效。

结构伪类：第几个孩子

按位置挑选元素，无需给每个元素手工加 class：

li:first-child      { color: green; }             /* 第一个 li */
li:last-child       { color: gray; }              /* 最后一个 li */
li:nth-child(2)     { background: #eee; }         /* 第二个 li */
li:nth-child(odd)   { background: #fafafa; }      /* 奇数行斑马纹 */
li:nth-child(3n)    { font-style: italic; }       /* 第 3、6、9…个 */

<ul>
  <li>苹果</li><li>香蕉</li><li>橘子</li>
</ul>

运行效果："苹果"变绿，第二个"香蕉"有浅灰背景；奇偶行规则可以轻松实现列表或表格的斑马纹。

:hover 做交互动效

:hover 不仅能作用于链接，任何元素都可以用它触发样式变化：

.card {
  width: 200px;
  padding: 20px;
  background: #fff;
}
.card:hover {
  background: #f0f8ff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  /* 悬停出现阴影 */
}

运行效果：鼠标移入卡片时背景变浅蓝并浮起阴影，移出后恢复原样，交互反馈更友好。

小结

伪类用单个冒号表示元素的特殊状态：链接四态要按 LVHA 顺序书写，结构伪类用 first-child、nth-child 按位置取元素，:hover 是打造悬停动效的主力。记住"一个冒号是伪类"，下一节我们讲两个冒号的伪元素。