选择第n个兄弟姐妹

Question

我想知道是否有更好的解决方案,而不是我发现的,而不改变html结构

HTML结构如下所示

<div class="wrap">
  <div class="divider"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="divider"></div>
</div>

所以在同一级别上有各种各样的DIV,我想做的是以不同方式为每四个块着色,直到出现分隔符,然后它必须重新计算.

我认为类似的东西.block:nth-child(4n)可以做到这一点,但它实际上是根据父级计算元素,而不是基于类.

这是试试的JSFiddle.每行的#4和#8块应该是不同颜色的 http://jsfiddle.net/SKgdH/3/

这就是我的工作方式:http: //jsfiddle.net/SKgdH/1/

我做的是像这样寻找.divider的第四个兄弟 .divider + .block + .block + .block + .block

但是,它必须为第8,12,16,...块编写相同的内容,这不再使其自动化.

有什么像.divider + .block:nth-sibling(4)或.divider + .block:nth-of-class(4)？

也许你们其中一个人知道如何在不改变源代码或使用javascript的情况下解决这个问题.

Answer 1

这样的伪类不起作用,因为你期望它匹配相对于不同复合选择器的元素,这不是简单选择器的工作方式.例如,如果您编写了一个复杂的选择器,该选择器只有一个带有该伪类的复合选择器(并且没有兄弟组合器):

.block:nth-sibling(4n)

你希望这匹配.block:nth-child(4n),什么都不匹配,或者无效？

能够缩减+ .block + .block + .block + .block并以某种方式重复它会很好,但遗憾的是由于选择器语法的设计方式,它是不可能的.

您必须使用JavaScript和/或将额外的类添加到适当的元素中.