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'。

它与您期望的那种类型AND类中的第一个不匹配

nth-of-type不在div上工作

1 个答案: