将 :nth-child 应用于元素，而不管它们的不同 parents

Question

我正在寻找一种方法来将 :nth-child 方法应用于分布在不同 parents / 容器中的元素（但似乎每个容器都从 0 开始倒计时）：

<div class="downloads">
    <div class="views-field views-field-view">
        <span class="field-content">
            <div class="view">
                <div class="view-content">
                    <div class="col col-xs-3">text</div> <!-- 1 -->
                    <div class="col col-xs-3">text</div> <!-- 2 -->
                    <div class="col col-xs-3">text</div> <!-- 3 -->
                </div>
            </div>
        </span>
    </div>
    <div class="views-field views-field-view-1">
        <span class="field-content">
            <div class="view">
                <div class="view-content">
                    <div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this back as 1) -->
                    <div class="col col-xs-3">text</div> <!-- 5 -->
                    <div class="col col-xs-3">text</div> <!-- 6 -->
                    <div class="col col-xs-3">text</div> <!-- 7 -->
                    <div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->
                    <div class="col col-xs-3">text</div> <!-- 9 -->
                </div>
            </div>
        </span>
    </div>
</div>

我fiddled有点绕，奇怪的是：它适用于:nth-child(3n+3)，但我需要每个第四元素受到影响，这就是问题所在。当我使用 :nth-child(4n+4) 时，它只会将其应用于显示的九个元素中的一个：

.downloads .col:nth-child(4n+4) {
    background: yellow;
}

有人可以帮我解决这个问题吗？ http://jsfiddle.net/6dkos5fy/1/

jQuery approach 适合我。谢谢亚历克斯！

var i = 1;
$(".downloads .col").each(function() {
  if (i % 4 === 0) {
    $(this).addClass("active");
  }
  i++;
});

.active {
   background: yellow;
 }

Answer 1

辛苦你了html结构。我使用 .views-field-view-1 元素创建以下内容来分隔容器。 :nth-child 与您看起来不一样：

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

.downloads .views-field-view-1 .col:nth-child(4n+1) {
  background: yellow;
}

<div class="downloads">
  <div class="views-field views-field-view">
    <span class="field-content">
   <div class="view">
    <div class="view-content">
     <div class="col col-xs-3">text</div> <!-- 1 -->
     <div class="col col-xs-3">text</div> <!-- 2 -->
     <div class="col col-xs-3">text</div> <!-- 3 -->
    </div>
   </div>
  </span>
  </div>
  <div class="views-field views-field-view-1">
    <span class="field-content">
   <div class="view">
    <div class="view-content">
     <div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this as 1) -->
     <div class="col col-xs-3">text</div> <!-- 5 -->
     <div class="col col-xs-3">text</div> <!-- 6 -->
     <div class="col col-xs-3">text</div> <!-- 7 -->
     <div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->
     <div class="col col-xs-3">text</div> <!-- 9 -->
    </div>
   </div>
  </span>
  </div>
</div>

为了更好地理解，请查看以下代码段：

.downloads .views-field-view-1 .col:nth-child(4n+1) {
  background: yellow;
}
.downloads .col {
  counter-increment: box;
}
.downloads .col:after {
  content: counter(box);
}

<div class="downloads">
  <div class="views-field views-field-view"> <span class="field-content">
   <div class="view">
    <div class="view-content">
     <div class="col col-xs-3">text</div> <!-- 1 -->
     <div class="col col-xs-3">text</div> <!-- 2 -->
     <div class="col col-xs-3">text</div> <!-- 3 -->
    </div>
   </div>
  </span>

  </div>
  <div class="views-field views-field-view-1"> <span class="field-content">
   <div class="view">
    <div class="view-content">
     <div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this as 1) -->
     <div class="col col-xs-3">text</div> <!-- 5 -->
     <div class="col col-xs-3">text</div> <!-- 6 -->
     <div class="col col-xs-3">text</div> <!-- 7 -->
     <div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->
     <div class="col col-xs-3">text</div> <!-- 9 -->
    </div>
   </div>
  </span>

  </div>
</div>

在您对 jquery 发表评论后，您可以尝试：

var i = 1;
$(".downloads .col").each(function() {
  if (i % 4 === 0) {
    $(this).addClass("active");
  }
  i++;
});

 .active {
   background: yellow;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="downloads">
  <div class="views-field views-field-view"> <span class="field-content">
   <div class="view">
    <div class="view-content">
     <div class="col col-xs-3">text</div> <!-- 1 -->
     <div class="col col-xs-3">text</div> <!-- 2 -->
     <div class="col col-xs-3">text</div> <!-- 3 -->
    </div>
   </div>
  </span>

  </div>
  <div class="views-field views-field-view-1"> <span class="field-content">
   <div class="view">
    <div class="view-content">
     <div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this as 1) -->
     <div class="col col-xs-3">text</div> <!-- 5 -->
     <div class="col col-xs-3">text</div> <!-- 6 -->
     <div class="col col-xs-3">text</div> <!-- 7 -->
     <div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->
     <div class="col col-xs-3">text</div> <!-- 9 -->
    </div>
   </div>
  </span>

  </div>
</div>

参考资料

:nth-child

将 :nth-child 应用于元素，而不管它们的不同 parents

Applying :nth-child to elements regardless of their different parents

jquery

css-selectors

pseudo-class