Question

我正在寻找一种方法将：nth-child方法应用于分布在不同父级/容器上的元素（但它似乎从每个容器的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适合我。谢谢Alex！

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的工作方式与您不同：

：nth-child（an + b）CSS伪类匹配具有的元素对于给定的积极因素，在文档树中它前面有一个+ b-1个兄弟姐妹或n为零值，并具有父元素。更简单地说， selector匹配数字位置的多个子元素这一系列的孩子匹配模式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应用于元素而不管父母的不同

1 个答案: