为什么nth-of-type以这种方式工作

Question

这是一个示例html，我认为应该用红色为每个偶数段落着色，但实际上会将颜色变为奇数。

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

<div class="level1">
  <div class="level2">
    <div class="unrelated"></div>
    <div class="level3">
      <p>The first paragraph.</p>
    </div>
    <div class="level3">
      <p>The second paragraph.</p>
    </div>
    <div class="level3">
      <p>The third paragraph.</p>
    </div>
    <div class="level3">
      <p>The fourth paragraph.</p>
    </div>
  </div>
</div>

为什么它似乎像n-child一样工作？

**编辑** 第二个例子：

.text:nth-of-type(even) {
    background: red;
}

<div>
<p id="A">unrelated</p>
<p id="B" class='text'>The first paragraph.</p>
<p id="C" class='text'>The second paragraph.</p>
<p id="D" class='text'>The third paragraph.</p>
<p id="E" class='text'>The fourth paragraph.</p>
</div>

你能解释一下为什么在这种情况下它不像那样吗？