html - nth-of-type 不适用于 div

Question

我对 nth-of-type 选择器感到困惑。

我试过这段代码

.red:nth-of-type(1){
  color:red;
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <div class="red">fourth</div>
</div>

它得到 p 和 div 类为红色并改变它的颜色

现在我被这个例子困住了

section .foo:nth-of-type(1){
  background:red;
}

.parent .foo:nth-of-type(1){
  background:red;
  }

<section>

  <p class="foo">Little</p>
  <p>Piggy</p>
  <div>...</div>
  <div class="foo">border...</div>
</section>

<div class="parent">
  <i class="foo">1</i>
  <i>x</i>
  <i class="foo">2</i>
  <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

我期待类 foo 部分中的 p 和 div 都获得红色背景，但它不起作用，当 div 被替换为 span 时效果很好

但是，代码中父 div 的其他样式可以正常工作并且样式 i 和 b

我知道这是 CSS selector for first element with class 的副本

Answer 1

这是因为类为“foo”的 div 不是该类型的第一个子元素，而是第二个。选择器将只匹配第一个类型的元素并具有类“foo”。

它与您期望的第一个类型和类不匹配