6

鉴于所有项目都处于同一级别的 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&2 是白色的，3&4 是粉红色的，5&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 ...; 用or包裹在一个 div 中；或者需要JS。你知道另一个黑客吗？欢迎分享！:nth-child(n+3):nth-of-type(n+3)

4

3 回答 3

5

这是一个结合了 兄弟、nth-child和nth-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和units类的 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 的奇数或偶数。

你来了！

这是玩的小提琴

于 2013-05-15T09:48:52.217 回答
3

如果我们只想要在 each 之后的第 3 和第 4 个 .pair .h2，那么这将起作用：

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

这是一个小提琴

于 2013-05-14T23:16:01.943 回答
2

出于无聊和好奇，我编写了一个函数来执行此操作。如果您坚持使用 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 nth 子选择器一样。添加false作为第四个参数...

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

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

我相信 sh0ber 写了一个更实用的解决方案，但这很有趣，我不妨分享一下。

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

于 2013-05-15T01:59:58.880 回答