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

在我的网页上，有一些DIV是用jOUT类动态创建的。 我想更改类的每一次迭代的颜色

我试着这样做：

.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

但它不起作用。真正奇怪的是，使用Chrome中的控制台，当我选择每个jOUT时，它显示所有jOUT都具有偶数属性。 我确信我有无效的CSS或HTML，但我找不到它。一定是我在做什么，但是什么？我想我想要的是一个开始寻找问题的地方。我已经使用w3c CSS验证验证了CSS，并使用HTML Tidy验证了HTML。

这在这里是可行的：

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

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

这可以在这里实现：

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

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

您的输入[name=outDivider]元素挡住了去路，从而使每个jOUT元素变得均匀。这是一个我将它们取出并使选择器正常工作的地方。我还改变了颜色，所以更容易看到

编辑：@isherwood比我快，但如果这个输入[name=outDivider]元素是绝对必要的，他的解决方案效果最好

您的输入[name=outDivider]元素挡住了去路，因此使每个jOUT元素变得均匀。这是一个我将它们取出并使选择器正常工作的地方。我还改变了颜色，所以更容易看到

---

编辑：@isherwood比我快，但如果这个输入[name=outDivider]元素是绝对必要的，他的解决方案效果最好

您当前的CSS工作正常，因为您的目标是所有子项，包括输入；这意味着，在这个场景中，所有div.jOUT都是偶数-您应该使用：nth of type，它将只针对div.jOUT的实例

---

fiddle

您当前的CSS工作正常，因为您的目标是所有子项，包括输入；这意味着，在这个场景中，所有div.jOUT都是偶数-您应该使用：nth of type，它将只针对div.jOUT的实例

---

fiddle

尝试清除缓存很难说没有看到标记，但它是第n个孩子，而不是第n次出现。我想你的元素都包裹在其他元素中，使它们都成为父母的第二个孩子还是什么？请将html添加到您的问题中。对我有效：@shawn your jOUT元素是其父元素的第二、第四和第六个子元素。这些都是偶数。偶数和奇数不只是针对类中的元素计算的。它们与给定父级中的所有同级相关。请尝试清除缓存，很难说没有看到标记，但这是第n个子级，而不是第n个出现。我想你的元素都包裹在其他元素中，使它们都成为父母的第二个孩子还是什么？请将html添加到您的问题中。对我有效：@shawn your jOUT元素是其父元素的第二、第四和第六个子元素。这些都是偶数。偶数和奇数不只是针对类中的元素计算的。是的，outDivider是服务器端人员请求的，所以我希望它是必需的，而不是多余的。是的，outDivider是服务器端人员请求的，所以我希望它是必需的，而不是多余的