nth-child(odd)在子元素间有其他元素时失效问题解析

你遇到的核心问题是对nth-child选择器的逻辑理解有误——它不是筛选某类元素的位置，而是看元素在父容器的所有子元素里的位置序号。

两种场景的具体分析： #

• 带中间

  的情况
  父容器的子元素顺序是：

  1. h3.sub-heading
  2. div
  3. h3.sub-heading
  4. div
  5. h3.sub-heading
     每个h3在父容器的子元素里的位置都是奇数（1、3、5），所以nth-child(odd)会命中所有h3，全部着色。

• 去掉中间

  的情况
  父容器的子元素顺序是：

  1. h3.sub-heading
  2. h3.sub-heading
  3. h3.sub-heading
     此时只有位置1和3的h3是奇数位，位置2的h3是偶数位，所以只有前、后两个h3会被着色，中间的不会。

解决方法： #

如果想针对同一类（或同一元素类型）的奇数项着色，改用nth-of-type(odd)选择器，它会忽略其他类型的元素，只统计同类型元素的位置：

.sub-heading:nth-of-type(odd){
  background-color: #ddd;
}

如果父容器里只有h3使用这个类，也可以直接用h3:nth-of-type(odd)，效果一致。

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