前端Wiki/CSS3/基础/新选择器

结构伪类选择器

结构伪类按元素在文档结构中的位置选择，把过去必须写 class 才能实现的「第一项、最后一项、隔行」效果全部交给 CSS：

:first-child / :last-child：第一个 / 最后一个孩子。
:nth-child(n)：第 n 个孩子，n 从 1 开始，还支持 odd、even 和公式 3n、2n+1。
:nth-last-child(n)：从后往前数第 n 个。
:only-child：独生子。

容易混淆的一对：:nth-child 看的是「在所有兄弟中的位置」，而 :nth-of-type 看「同类型标签中的位置」。比如容器里有 div 和 p 混排，p:nth-child(2) 要求第二个孩子恰是 p，而 p:nth-of-type(2) 只要求是第二个 p。

经典应用：列表去分割线（首尾项去掉边框）、表格隔行变色、九宫格去边缘间距，都可以用结构伪类零 HTML 侵入地实现。

本节要点nth-child 按「所有孩子」数位置，支持 odd/even/公式；of-type 只数同类型标签；列表首尾处理和隔行变色首选结构伪类。

CSS

<style>
  li {
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }
  /* 隔行变色 */
  li:nth-child(odd) { background: #e0f7fa; }
  /* 最后一项去掉分割线 */
  li:last-child { border-bottom: none; }
  /* 第一个加粗 */
  li:first-child { font-weight: bold; }
  /* 前三个全部标红（n 从 0 取值：0,1,2） */
  .hot :nth-child(-n+3) { color: tomato; }
</style>
<ul class="hot">
  <li>排行榜第1名（加粗红色）</li>
  <li>第2名（红色）</li>
  <li>第3名（红色）</li>
  <li>第4名（普通，浅底）</li>
  <li>第5名（无底色）</li>
</ul>

🔗 相关词条HTML CSS div 标签元素表格列表伪类

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读