Question

鉴于所有项目处于同一级别的html：

<div class="h2">Title: Colors</div>
 <div class="pair">Hello world (1)</div>
 <div class="pair">Hello world (2)</div>
 <div class="pair">Hello world (3)</div>
 <div class="pair">Hello world (4)</div>
 <div class="pair">Hello world (5)</div>
 <div class="pair">Hello world (6)</div>

<div class="h2">Title: Units</div>
 <div class="pair">Hello world (1)</div>
 <div class="pair">Hello world (2)</div>
 <div class="pair">Hello world (3)</div>
 <div class="pair">Hello world (4)</div>
 <div class="pair">Hello world (5)</div>
 <div class="pair">Hello world (6)</div>

如何从前一个.h2元素开始选择n + 3和n + 4 .pair元素？

所以1＆amp; 2是白色，3＆amp; 4是粉红色，5＆amp; 6是白色等等。

我试过了.pair:nth-child(4n+3), .pair:nth-child(4n+4) { background: #FFAAAA; }，但它计算了.h2也是孩子的身体的孩子，从而打破了我的平衡。

http://jsfiddle.net/zPYcy/2/

编辑：未找到纯CSS选择器来选择类型之后的相邻项目，例如.class（n + 3）。或者，无限系列的CSS选择器，例如div + .class + .class + .class ...;与:nth-child(n+3)或:nth-of-type(n+3)一起在div中包装;或 JS 是必需的。你知道另一个黑客吗？欢迎分享！

Answer 1

这是一个结合兄弟， nth-child 和 n-last-child 选择器的解决方案。

每个类h2的div也应该使用一个我称之为“颜色”和“单位”的额外类像这样：

<div class="h2 colors">Title: Colors</div>
...
<div class="h2 units">Title: Colors</div>
...

我们申请所有提供前一个兄弟姐妹的孩子，其中 h2 和颜色以下规则将绘制粉红色的div

.h2.colors ~ .pair:nth-child(4n+4), .h2.colors ~ .pair:nth-child(4n+5) { 
    background: #FFAAAA; 
}

当然，这也会将这些div绘制在 h2 和单位类的div之下。我们不希望这种情况发生。所以现在我们应用以下两个规则，以相反的顺序选择h2单位。

.h2.units ~ .pair:nth-last-child(4n+3), .h2.units ~ .pair:nth-last-child(4n+4) { 
    background: #FFAAAA; 
}

请注意，现在我们还必须应用白色背景来修复我们的第一条规则所绘制的额外div 所以......

 .h2.units ~ .pair:nth-last-child(4n+1), .h2.units ~ .pair:nth-last-child(4n+2) { 
        background: #ffffff; 
    }

当我们使用nth-last-child选择器时，唯一需要注意的是最后一组中的奇数或偶数div。

你就是这样！

以下是与{/ p>一起玩的fiddle

Answer 2

如果我们只想每个.h2之后的第3和第4个.pair，那么这将有效：

.h2 + .pair + .pair + .pair,
.h2 + .pair + .pair + .pair + .pair { background: #FFAAAA; }

如果我们想要在更长的列表中继续两个替换，我们将需要另一个解决方案。

编辑：由于我们确实需要一个可扩展的解决方案，如果我们可以通过将每个.pair项块包装在另一个类中来稍微更改标记：

<div class="h2 colors">Title: Colors</div>
<div class="pairList">
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    <div class="pair">Hello world</div>
    ...
</div>

然后我们可以编写一个规则，可以扩展任何数量的项目，如：

.pairList .pair:nth-of-type(4n+3), 
.pairList .pair:nth-of-type(4n+4) { 
    background: #FFAAAA; 
}

Here is a FIDDLE

Answer 3

出于无聊和好奇心，我写了一个功能来做到这一点。如果您坚持使用html，并且您有像这样的扩展行，那么我的插件可能对您有用。

从我的jsFiddle复制函数并使用如下：

var pair1 = findCousin('h2', 'pair', '4n+2');
var pair2 = findCousin('h2', 'pair', '4n+3');
var s = pair1.add(pair2);

您可以更改h2和pair两个不同的类名，或者只要其中包含#n就可以使用不同的模式，并且可以选择+#，就像css一样第n个孩子选择器。添加false作为第四个参数......

findCousin('list-title', 'list-item', '3n', false);

...将在给定模式中的第一个list-title之后选择所有内容，而不是在每个 list-item之后选择....如果这有意义的话。

我相信sh0ber已经写了一个更实用的解决方案，但这很有趣，我也可以分享。

http://jsfiddle.net/REU33/6/

CSS选择：如何统计和选择特定类的子级？

3 个答案: