为什么nth-of-type（）和nth-child（）会破坏不相关的元素

Question

我显然缺少一些非常基本的东西，但我有以下html

<div class="test-cont">

    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">TEST2</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">HELLO WORLD</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">TEST2</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">HELLO WORLD</div>
    </div>
</div>

并使用以下选择器

 .test-cont .row:nth-of-type(odd) {
     background: purple;
 }
 .test-cont .row:nth-of-type(even) {
     background: red;
 }

我认为表示'选择nth child .text-cont项，其中类包含.row并且是奇数或偶数'。

然而<div class="md-margin"></div>打破了这些选择器。

所以我最终得到了

而不是我期望的交替模式。删除md-margin div时，问题得以解决。我错过了什么？

Answer 1

这是因为您之间有md-margin个div，使它们成为even个。

（虽然:nth-of-type将在使用类时显示您想要的结果 - 取决于标记 - 但它引用了元素类型，这就是div md-margin为“计数”的原因“这里。

带有md-margin 的

代码段

.test-cont .row:nth-of-type(4n+2) {
     background: purple;
 }
 .test-cont .row:nth-of-type(4n+4) {
     background: red;
 }

<div class="test-cont">

    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">TEST2</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">HELLO WORLD</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">TEST2</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">HELLO WORLD</div>
    </div>
</div>
 

没有md-margin

的代码段

.test-cont .row:nth-of-type(odd)  {
  background: purple;
}
.test-cont .row:nth-of-type(even) {
  background: red;
}

<div class="test-cont">
  <div class="row">
    <div class="col-md-12">TEST2</div>
  </div>
  <div class="row">
    <div class="col-md-12">HELLO WORLD</div>
  </div>
  <div class="row">
    <div class="col-md-12">TEST2</div>
  </div>
  <div class="row">
    <div class="col-md-12">HELLO WORLD</div>
  </div>
</div>