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选择器的副本

Answer 1

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

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