css - 如何正确循环 nth-of-type？

<分区>

我意识到网上和论坛上有大量关于此的信息。我已经通读了很多，并尝试了几种不同的方法，但出于某种原因，我无法理解为什么这对我不起作用。

我有一系列文章通过循环添加到页面中。我希望实例 1、4、7 等的 cycle-colour-bg 类的背景颜色相同，然后更改实例 2、5、8 等的背景颜色。，然后为实例 3、6、9 等设置第三种颜色。

这是我在循环内部的标记(针对每个实例):

<div class="col-sm-4">
    <article class="masonary flex-cell">
        <div class="featured-image-secondary inner-border-10">
            <img src="some-image-url">
        </div>

        <div class="post-body-secondary cycle-colour-bg">
            <p class="fw700 post-title-secondary void-colour">Some Title</p>
            <a href="Some-Link">Read More</a>
        </div>
    </article>
</div>

这是我尝试的最后一点 CSS:

.masonary:nth-of-type(3n+1) .cycle-colour-bg {
    background-color: #707272;
}

.masonary:nth-of-type(3n+2) .cycle-colour-bg {
    background-color: #57caee;
}

.masonary:nth-of-type(3n+3) .cycle-colour-bg {
    background-color: #106db6;
}

我已经尝试了 nth-of-type 和 nth-child，我已经尝试将第 n 个选择器添加到 cycle-colour-bg 类和它之前的 div。我不知道为什么我不能全神贯注于此，但非常感谢任何能为我指出显而易见的事情的帮助。

最佳答案

您需要定位父元素col-sm-4，从列表中选择nth-of-type，然后下降到里面选择cycle -颜色-bg。

如果所有的 masonary 元素都在 col-sm-4 中，您当前的代码就可以工作了

.col-sm-4:nth-of-type(3n+1) .cycle-colour-bg { /* Target 1, 4 and 7 */
  background-color: #707272;
}

.col-sm-4:nth-of-type(3n+2) .cycle-colour-bg { /* Target 2, 5 and 8 */
  background-color: #57caee;
}

.col-sm-4:nth-of-type(3n+3) .cycle-colour-bg { /* Target 3, 6 and 9 */
  background-color: #106db6;
}

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

<div class="col-sm-4">
  <article class="masonary flex-cell">
    <div class="featured-image-secondary inner-border-10">
      <img src="some-image-url">
    </div>

    <div class="post-body-secondary cycle-colour-bg">
      <p class="fw700 post-title-secondary void-colour">Some Title</p>
      <a href="Some-Link">Read More</a>
    </div>
  </article>
</div>

关于css - 如何正确循环 nth-of-type？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57835697/