为何nth-of-type选择器表现不符预期？附代码示例

嗨，我来帮你搞定这个CSS选择器的坑！你遇到的问题核心是nth-of-type(even)的工作逻辑和你预想的不一样——它不是针对带.level3类的元素计数，而是按父元素里的同类型标签（这里是<div>）来排序计数的。

问题根源拆解 #

先看你的HTML结构：

<div class="level2">
  <div class="unrelated"></div> <!-- 这是父元素里的第1个<div> -->
  <div class="level3">...</div> <!-- 第2个<div>，符合:nth-of-type(even) -->
  <div class="level3">...</div> <!-- 第3个<div>，属于奇数位 -->
  <div class="level3">...</div> <!-- 第4个<div>，符合:nth-of-type(even) -->
</div>

你的选择器.level1 .level3:nth-of-type(even) p会命中父元素里第2、4个<div>（也就是第一个和第三个.level3），自然就把奇数位置的段落染红了，和你的期望正好相反。

三种解决方案 #

1. 用CSS Selectors Level 4的精准筛选语法（推荐）

这个语法能先筛选出带指定类的兄弟元素，再在这些元素里计数，完全贴合你的需求：

.level1 .level2 div:nth-child(even of .level3) p {
  background: red;
}

它会先找出.level2下所有带.level3类的<div>，然后在这些里面选偶数位置的元素。注意：这个语法支持Chrome、Firefox、Edge 97+等现代浏览器，旧浏览器可能不兼容。

2. 基于现有结构硬匹配（兼容旧浏览器）

如果你的.level2下永远只有一个.unrelated的<div>在最前面，那可以直接针对.level3在父元素里的位置调整选择器：

/* 选中父元素里第3、5、7...个<div>——也就是第2、4、6...个.level3 */
.level1 .level2 div.level3:nth-of-type(odd) p {
  background: red;
}

因为第一个.level3是父元素的第2个<div>（even），第二个是第3个（odd），用nth-of-type(odd)就能精准命中你想要的偶数位段落。

3. 调整HTML结构（最彻底的兼容方案）

如果能修改HTML的话，把.unrelated元素移到.level2外面，或者给它换个不同的标签（比如<span>），这样.level3的<div>就会从父元素的第1个位置开始计数，你原来的选择器就能正常工作了：

<div class="level1">
  <div class="unrelated"></div> <!-- 移到.level2外面 -->
  <div class="level2">
    <div class="level3">
      <p>The first paragraph.</p>
    </div>
    <div class="level3">
      <p>The second paragraph.</p>
    </div>
    <!-- 其他内容 -->
  </div>
</div>

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