Question

我有这段代码，我无法弄清楚为什么第n个类型的选择器需要为2，而不是1，这个类型的第一个兄弟。

这是一个jsfiddle代码：https://jsfiddle.net/xj5hvn16/

有人可以向我解释一下吗？

.flowbox .utm_registrars_code:nth-of-type(2) {
  background-color: red;
}

<div class="flowbox freebox">
  <div class="pholdcard18"></div>
  <div class="flowcard14 utm_registrars_code">
    <div class="content">
      Content 1
    </div>
  </div>
  <div class="flowcard14 utm_registrars_code">
    <div class="content">
      Content 2
    </div>
  </div>
  <div class="flowcard14 utm_registrars_code">
    <div class="content">
      Content 3
    </div>
  </div>
</div>

Answer 1

nth-of-type并不代表nth-of-class！

div类型的第一个元素是

<div class="pholdcard18"></div>

因此，您的Content 1元素是第二个并突出显示。

Answer 2

这是因为nth-of-type以某种类型的第一个元素开头，在您的情况下是div，而不是具有所选类的第一个元素

：nth-of-type（）伪类表示具有+ b的元素兄弟姐妹在文档中具有相同的扩展元素名称树，对于n的任何零或正整数值，并且具有父级元件。

更多信息：

我需要解释nth-of-type的工作原理

2 个答案: