12

我想知道是否有比我在不更改 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 的情况下解决这个问题。

4

3 回答 3

12

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

.block:nth-sibling(4n)

您是否希望它匹配.block:nth-child(4n)、完全不匹配或无效？

能够以+ .block + .block + .block + .block某种方式删节并使其重复会很好，但不幸的是，由于选择器语法的设计方式，这是不可能的。

您将不得不使用 JavaScript 和/或向适当的元素添加额外的类。

于 2013-04-03T14:34:01.833 回答
2

这里的问题是:nth-of-type指元素的类型，两者都是type 的元素。.divider.block<div>

您真正需要的是.divider成为与.block.

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

  1. <div class="divider">
  2. <div class="block">

我很想换掉-主题休息<div class="divider">元素。<hr>

然后你可以使用：

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

去风格.block。

于 2017-02-06T14:28:39.263 回答
1

正如 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 列染成黄色。

于 2013-04-03T14:48:49.350 回答