Question

我们假设我们有这样的设置：

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

这是一个工作小提琴：https://jsfiddle.net/1L4rodh4/

现在...... Nth selector正在按预期工作。问题是我想要一致地设置样式元素。所以它似乎在2 .row之间是无缝的。第一个.col中的.row是动态生成的，可能最终为even或odd。

如果我不清楚，请告诉我澄清。我无法在其他地方找到任何相关信息。这似乎很简单，但似乎不可能。

有更好的方法可以做到这一点，还是我被卡住了？

我知道我可以使用JS来获取第一行＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;并更改第二行中的选择器。尽管如此，这似乎太过黑客了。

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

以下是一个工作示例，说明如何使用简单的普通JS脚本，基于下面所选答案中的代码。

＆＃13;

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');
}

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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;
}

检查孩子的数量是偶数还是奇数，并对其进行适当的调整。

更新：尽管它看起来像什么。这对于具有奇数子项的父项直接跟随具有奇数子项的另一父项（这是整点）的情况不适用。但是我要把这个留在这里让别人知道他们的想法。

由于它仍然是一个答案，单靠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');

Answer 2

不，没有纯粹的CSS方法。

原因是CSS规则只能基于前面的子项或祖先进行限定。在您的情况下，您希望根据前一个兄弟（第一个<div>组）中内部的内容来限定第二个组。

处理此问题的唯一方法是通过向第一个<div>添加一个类来表示它是否具有偶数或奇数个子项。

CSS / JS：目标：跨越2个父元素的第n个孩子一致吗？

2 个答案: