最近在做项目中的文章列表页，遇到个挺有意思的小问题：想给列表的第一个项加个粗体突出，最后一个项加条下划线提示“更多内容”，一开始我居然傻乎乎地给每个<li>手动加了class="first"和class="last"。结果HTML里堆了一堆类名，同事瞥了眼屏幕说：“你咋不用结构伪类？明明不用加额外class就能搞定。”

我愣了愣，对哦——结构伪类不就是干这个的吗？

其实接触CSS这么久，结构伪类算是个“隐形神器”。它不像选择器那么直观，但学会了真的能省不少事。今天就顺着这个话题，写点自己的实践心得，权当给新手朋友的一点参考。

一、先搞明白：结构伪类到底在做什么？

简单说，结构伪类就是根据元素在页面结构中的“位置”或者“状态”，精准选中目标元素。
打个比方，它像是给元素贴了个“隐形坐标”——:first-child是“父元素下的第一个孩子”，:hover是“鼠标悬停时的状态”。不用额外加class，直接通过它在页面中的位置或状态，就能找到它。

二、这几个伪类，我几乎每天都在用

1. :first-child与:last-child：抓首尾的“快捷方式”

这两个是最基础的，用来选父元素的第一个或最后一个子元素。
比如文章列表的例子： 

<ul class="article-list">
  <li>文章1：CSS结构伪类的应用</li>
  <li>文章2：JS中闭包的理解</li>
  <li>文章3：Vue组件通信方式总结</li>
</ul>

如果想给第一个列表项加粗，最后一个加下划线，不用加class，直接写： 

.article-list li:first-child {
  font-weight: 700;
  color: #2f54eb; /* 用主题色突出 */
}

.article-list li:last-child {
  text-decoration: underline;
  cursor: pointer; /* 提示可点击 */
}

效果很明显：第一个项变粗变蓝，最后一个项有了下划线和手型指针。省了我不少敲class的时间。

2. :nth-child(n)：最灵活的位置选择器

如果说前两个是“固定靶”，那:nth-child就是“移动靶”——能选任意位置的子元素。
常见的用法有几种：

  • :nth-child(2)：直接选第二个子元素；
  • :nth-child(odd)/:nth-child(even)：选奇数或偶数项（隔行变色必备）；
  • :nth-child(3n+1)：选第1、4、7…个元素（数学表达式，3乘0加1等于1，3乘1加1等于4，依此类推）。

我最近做后台管理系统时，用它做了列表的隔行变色： 

.article-list li:nth-child(even) {
  background-color: #f5f7fa; /* 偶数项浅灰背景 */
  padding: 10px 15px; /* 加点头内边距，更舒服 */
}

这样一来，列表看起来更清爽，长时间看也不容易疲劳——后台的用户反馈说“比之前舒服多了”。

3. :hover与:focus：给元素加“互动感”

这两个是做交互的基础。
:hover是鼠标悬停时的状态，比如链接变色： 

a:hover {
  color: #ff6a00; /* 橙色比默认蓝更有点击欲 */
  text-decoration: none; /* 去掉下划线，更简洁 */
}

:focus是元素获得焦点时的状态，比如输入框被点击： 

input[type="text"]:focus {
  border-color: #2f54eb; /* 边框变蓝，显眼 */
  box-shadow: 0 0 0 2px rgba(47, 84, 235, 0.1); /* 加个小阴影，更有层次 */
}

之前我没给输入框加:focus效果，测试的时候同事说：“输入框没反应，我还以为坏了呢。”加了之后，用户明显知道“这里能输入”，体验好了很多。

三、新手容易踩的两个坑

1. :nth-child(n)只看位置，不看标签

我之前犯过一个错：在一个包含p和span的容器里，想选第二个p元素，写了.container p:nth-child(2)，结果没选到。
后来才明白，:nth-child(2)选的是父元素下的第二个子元素，不管它是什么标签。比如上面的例子，第二个子元素是span，所以p:nth-child(2)选不到任何东西。
记住：它只认位置，不认标签类型。

2. 所有伪类都依赖“父元素”

比如li:first-child，是相对于它的直接父元素来说的。如果有两个不同的父元素： 

<ul>
  <li>列表1</li> <!-- 这个是ul的first-child -->
</ul>
<ol>
  <li>有序列表1</li> <!-- 这个是ol的first-child -->
</ol>

写li:first-child，只会选中ul里的“列表1”——因为它们的父元素不一样。
这点要注意，不然很容易选错元素。

四、最后：多练比记更重要

学完这些伪类，我建议你立刻做个小练习：

  1. 写个文章列表，用:first-child加粗第一个项；
  2. 用:nth-child(even)给偶数项加背景色；
  3. 给链接加:hover变色；
  4. 给输入框加:focus效果。

多试几次，你会发现：原来不用加那么多class，也能写出干净的CSS。

其实结构伪类没什么神秘的，就是CSS给我们的“小工具”。掌握这几个常用的，能搞定80%的“精准选元素”需求。我现在做项目时，结构伪类占CSS文件的60%以上——不是我懒，是它真的好用。

下次做列表或交互时，别再乱加class了。试试结构伪类，说不定会给你惊喜。

（完）
ps：记不住伪类名字？存篇笔记在浏览器里，随时翻就行～