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和/或在适当的元素中添加额外的类。

Answer 2

正如BoltClock所解释的，如果没有JavaScript，你就无法做到这一点。如果你选择那条路线（即使你明确地说没有 JavaScript），可以用这样的jQuery来完成：

var counter = 0;
$('.wrap > div').each(function() {
    if ($(this).hasClass('divider')) {
        counter = 0;
    }
    else if ($(this).hasClass('block')) {
        counter++;
        if (counter % 8 == 4) {
            $(this).css('background-color','#ff0');
        }
    }
});

这会使每行中的第4列变黄。

Answer 3

此处的问题是:nth-of-type引用 元素的类型 ，.divider和.block都是类型的元素<div>。

您真正需要的是.divider与.block不同的元素类型。

在此基础上，如果<div class="wrap">中只有两个子元素是：

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

我很想换<div class="divider"> <hr> - 专题中断元素。

然后你可以使用：

 .wrap div:nth-of-type(4)

样式.block。

选择第n个兄弟姐妹

3 个答案: