CSS nth-child选择器未按预期生效：前4个元素背景样式异常求助

嘿，这问题我见太多了！很多人刚用:nth-child()都会踩这个坑——它的计数逻辑和你想的可能不一样，核心点在于：

:nth-child()是基于父元素下所有子元素的位置来匹配，不管你选中的元素是什么标签类型。换句话说，它先找父元素里第N个孩子，再检查这个孩子是不是你指定的元素；如果不是，就不会生效。

举个最常见的错误场景，比如你的HTML结构是这样的：

<div class="container">
  <h3>这是一个标题</h3> <!-- 父元素的第1个子元素 -->
  <div class="card">卡片1</div> <!-- 第2个 -->
  <div class="card">卡片2</div> <!-- 第3个 -->
  <div class="card">卡片3</div> <!-- 第4个 -->
  <div class="card">卡片4</div> <!-- 第5个 -->
</div>

然后你写了这样的CSS：

.container .card:nth-child(1) { background: red; }
.container .card:nth-child(2) { background: blue; }

这时候你会发现第一个card根本不会变红——因为父元素的第1个子元素是<h3>，不是.card，所以.card:nth-child(1)找不到任何匹配的元素；而.card:nth-child(2)会选中第一个card，因为它是父元素的第2个子元素。

解决办法分两种情况： #

1. 只想针对同类型元素计数：改用:nth-of-type()
   这个选择器会只统计父元素下和目标元素同标签类型的子元素，比如上面的例子改成：

   .container .card:nth-of-type(1) { background: red; }
   .container .card:nth-of-type(2) { background: blue; }
   

   它会忽略<h3>，直接给第一个.card（也就是父元素里的第一个<div>）加上红色背景，完美符合预期。

2. 父元素里的子元素都是目标类型，但计数还是不对：检查父元素是否正确
   有时候你可能嵌套了多余的容器，比如每个.card外面都包了一层<div class="wrap">，这时候.card的直接父元素是.wrap，每个.card都是.wrap的第1个子元素，所以.card:nth-child(2)永远匹配不到。这时候应该给外层的.wrap用:nth-child()，再选中里面的.card：

   .container .wrap:nth-child(2) .card { background: blue; }
   

额外提醒两个小坑： #

• 隐藏元素（display: none）依然会被:nth-child()和:nth-of-type()算进计数里，只有从DOM中移除才不会影响。
• 如果想一次性选中前N个元素，可以用nth-child(-n+N)的写法，比如选中前4个.card：

  .container .card:nth-of-type(-n+4) { background: #ccc; }
  

内容的提问来源于stack exchange，提问作者AnApprentice