Html 未筛选的第n个子项

我有几个元素，我想使用第n个子元素来应用背景色。问题是我需要能够使用javascript动态隐藏这些元素。我想我可以通过添加/删除一个allow类并将第n个子类应用于该类来保持交替颜色，但没有效果。我有一个JSFIDLE中的示例。 谢谢你的帮助

HTML

---

你需要JS，比如

function markEven() {
    var items= document.querySelectorAll('div.item');
    var count = 0;
    for (var i = 0; i < items.length; i++) {
        var classes = items[i].classList;
        classes.toggle('even', classes.contains('allow') && ++count % 2);
    }
}

---

从技术上讲，您的代码按预期工作。它在不允许的情况下忽略这两个，并根据偶数标记处的div数添加颜色。不要认为你的代码不起作用，只是没有选择正确的代码。这里有几个相关的问题。底线是，第n个孩子就是第n个孩子，即使是孩子，也适用于他们，不管他们可能有什么其他的课程或风格。@torazaburo是说没有办法做我想做的事吗？@Geohut也许是这样。底线是我不知道如何达到我想要的效果。我有什么办法可以做到这一点吗？@torazaburo使用“偶数”和“奇数”类，我想避免这种情况，但看起来这越来越像是唯一的选择。谢谢

div {
  display: block;
  height: 100px;
  width: 100px;
}

div.allow{
    background: gray; 
}

div:nth-child(even){
  background: orange;
}
div:not(.allow){
    display:none;
}

function markEven() {
    var items= document.querySelectorAll('div.item');
    var count = 0;
    for (var i = 0; i < items.length; i++) {
        var classes = items[i].classList;
        classes.toggle('even', classes.contains('allow') && ++count % 2);
    }
}

div.item       { display: none;  background: gray;   }
div.item.allow { display: block;                     }   
div.item.even  {                 background: orange; }