javascript - CSS/JS : Targeting :nth-child consistant across 2 parent elements?

Question

假设我们有这样的设置:

.col:nth-child(2n+1) {
  background: red;
}

/* Style the div's for testing */
div.row {
  width: 100%;
  border: 1px solid blue;
}
div.col {
  padding: 12px 0;
  width: 100%;
}

<div class="row"><!-- The .col's in this row are dynamically generated -->
  <div class="col 1"></div>
  <div class="col 2"></div>
  <div class="col 3"></div>
  <div class="col 4"></div>
  <div class="col 5"></div>
</div>
<div class="row">
  <div class="col 1"></div>
  <div class="col 2"></div>
  <div class="col 3"></div>
  <div class="col 4"></div>
</div>

这是一个有效的 fiddle :https://jsfiddle.net/1L4rodh4/

现在...第 N 个选择器 正常工作。问题是我想让元素的样式保持一致。这样它在 2 个 .row 之间看起来是无缝的。第一个 .row 中的 .col 是动态生成的，最终可能是偶数 或奇数。

如果我不清楚，请问我澄清。我在其他地方找不到关于此的任何信息。这是一件看似简单，又似乎不可能的事情。

有没有更好的方法，还是我卡住了？

---

我知道我可以使用 JS 获取第一“行”中“col”的数量并更改第二行中的选择器。不过，这似乎太骇人听闻了。

编辑:我将接受 JS 解决方案。

---

以下是一个工作示例，说明如何根据下面所选答案中的代码使用简单的纯 JS 脚本完成此操作。

var cols = document.querySelectorAll('.table.js-fix .tr');
for (var i = 0; i < cols.length; i++) {
  cols[i].classList.add(i % 2 == 0 ? 'even' : 'odd');
}

.table.js-fix .tr:nth-child(2n + 1), /* :nth-child fallback */
.table.js-fix .tr.even {
	background: red;
}
.table.js-fix .tr.odd {
	background: #fff;
}

/* Style for testing */
.table {
  width: 100%;
  border: 1px solid blue;
}
.tr {
  padding: 12px 0;
  width: 100%;
}

<div class="row"><!-- The .tr in this row is just used as a thead -->
  <div class="col">
    <div class="table">
      <div class="tr">Section Title</div>
    </div>
  </div>
</div>
<div class="row"><!-- The .tr's in this row are dynamically generated -->
  <div class="col">
    <div class="table js-fix">
      <div class="tr"></div>
      <div class="tr"></div>
      <div class="tr"></div>
    </div>
  </div>
</div>
<div class="row"><!-- There will always be 5 .tr's in this row -->
  <div class="col">
    <div class="table js-fix">
      <div class="tr"></div>
      <div class="tr"></div>
      <div class="tr"></div>
      <div class="tr"></div>
      <div class="tr"></div>
    </div>
  </div>
</div>

JSFiddle 上面的例子:https://jsfiddle.net/n12h70j6/

Answer 1

您可以使用 CSS 做到这一点。参见 this或 this .

.col:first-child:nth-last-child(even) ~ .col:nth-child(2n + 1),
.col:first-child:nth-last-child(even){
  background-color: red;
}

.col:first-child:nth-last-child(odd) ~ .col:nth-child(2n + 2){
  background-color: red;
}

这会检查 child 的数量是偶数还是奇数，并适本地设置它们的样式。

更新:不管它看起来像什么。这不适用于有奇数个 child 的 parent 直接跟随另一个有奇数个 child 的 parent (这就是重点)。然而，我将把它留在这里让其他人在他们的脑海中产生想法。

既然它仍然是一个答案，单靠 CSS 是做不到的，所以必须求助于 javascript/jQuery。

这可能是使用纯 JS 执行此操作的一种方法

var cols = document.querySelectorAll('.col');
for(var i = 0; i < cols.length; i++)
    cols[i].classList.add(i % 2 == 0 ? 'some-class' : 'alternate-class');