Question

在我的网页上有使用jOUT类动态创建的DIV。我想改变该类的每个其他迭代的颜色。

我试图这样做：

.jOUT:nth-child(even){
   background:#eeefff;
}

.jOUT:nth-child(odd){
   background:#cccffe;
}

我的HTML如下：

  <div id="outData">
    <input type="hidden" name="outDivider" value="-------">
    <div class="jOUT isOpaque">
      <!-- ... -->
    </div>
    <input type="hidden" name="outDivider" value="-------">
    <div class="jOUT isOpaque">
      <!-- ... -->
    </div>
    <input type="hidden" name="outDivider" value="-------">
    <div class="jOUT">
      <!-- ... -->
    </div>
  </div>

完整的HTML here

但它没有用。真正奇怪的是，在Chrome中使用控制台时，当我选择每个jOUT时，它会显示所有这些都具有＆＃34;偶数＆＃34;属性。我确信我有无效的CSS或HTML，但我无法找到它。它必须是我正在做的事情，但是什么？我想我要求的是一个地方开始寻找问题的想法。我使用w3c CSS验证验证了CSS，使用HTML Tidy验证了HTML。

Answer 1

您当前的CSS正常运行，因为您的目标是所有孩子（包括input）;这意味着，在这种情况下，您的所有div.jOUT都是偶数 - 您应该使用:nth-of-type，这只会定位div.jOUT的实例......

.jOUT:nth-of-type(even){
   background:#eeefff;
}

.jOUT:nth-of-type(odd){
   background:#cccffe;
}

DEMO小提琴

Answer 2

这可以在这里工作：

.jOUT:nth-child(4n){
   background:#eeefff;
}

<强> More on that

但是，这有点脆弱。更好的方法是在这些元素上添加替代样式类，可能通过服务器端应用程序。

Answer 3

您的input[name="outDivider"]元素阻碍了，因此每个jOUT元素均匀。这是一个working pen，我把它们拿出来让选择器正常工作。我也改变了颜色，所以更容易看到。

编辑： @isherwood打败了我，但如果这个input[name="outDivider"]元素绝对必要，那么他的解决方案效果最好！

类中的所有元素都显示为偶数

3 个答案: