将li：nth-​​child选择器应用于总计数，而不是使用新的ul重置

Question

我有许多ul跟随彼此并且需要保持这种方式，但我也希望在所有这些ul中交替使用li背景颜色。我尝试以全局或更高的容器为目标的所有东西都没有起作用，而是根据与父对象相关的子数来应用偶数/奇数样式的默认行为，这通常只是单个项目

这可能吗？我也可以在PHP中分配偶数/奇数类，因为我生成输出但我觉得有一种方法可以在CSS中执行此操作，而我只是不熟悉它来弄清楚如何。也许我只是在我的搜索中没有使用正确的术语，但我没有在谷歌上找到任何结果。

其中一些ul也可能嵌套了ul，但我不想将这些样式定位到这个样式，仅.container > ul.topLevel > li。

尝试失败：

.uList > li { background: #58708D; }
.uList > li:nth-child(odd) { background: #4A4A4A; }

.ContentShell .uList > li:nth-of-type(odd)  {
    background: #4A4A4A;
}
.ContentShell .uList > li:nth-of-type(even) {
    background: #58708D;
}

.ContentShell > div > .uList > li:nth-child(odd)    {
    background: #4A4A4A;
}

.ContentShell > div > .uList > li:nth-child(even)   {
    background: #58708D;
}

JSFiddle显示问题：https://jsfiddle.net/q56h4qz9/2/

我希望颜色来回交替，即使它们处于不同的ul

Answer 1

我不确定是否有css解决方案，但您可以使用一些javascript来执行此操作：

＆＃13;

＆＃13;

var els = document.querySelectorAll("li");
for (i = 0; i < els.length; ++i) {
  i % 2 == 0? els[i].style.color = "green" : els[i].style.color = "red"
}

＆＃13;

<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
<ul>
<li>text</li>
</ul>
<ul>
<li>text</li>
</ul>
<ul>
<li>text</li>
</ul>
<ul>
<li>text</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您尝试将奇数/偶数CSS样式应用于此li，那么您可以使用nth-child(odd)或nth-child(even)但是，您希望在ul上使用它，而不是li。如果你将它放在li上，那么它会将样式应用于li的奇/偶子。

ul.topLevel > li:nth-child(odd);
ul.topLevel > li:nth-child(even);