CSS：在子列表中具有不重复颜色的奇偶交替列表[重复]

Question

HTML：

<ul>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<ul>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
</ul>

CSS：

ul {
  margin-left: 15px;
}
li {
    background-color: blue;
    position: relative;
    height: 20px;
}

li:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: -1000px;
  background: blue;
  width: 1000px;
  height: inherit;
}


li:nth-child(odd), li:nth-child(odd):before {
     background-color: green;
}
li:nth-child(odd)::before {
     background-color: green;
}
li:nth-child(even) {
    color:white;
}

这是一个fiddle，所以你可以看到它的样子。如您所见，我想要一个交替列表，但也希望 child-ul 永远不要重复相同的颜色。如您所见，有两条绿线紧随其后。我怎样才能防止这种情况发生？

有什么想法或技巧可以实现吗？

Answer 1

这应该可行：

我反转了嵌套在两个 ul 中的每个 li 的颜色设置。

所以两个 uls 中的每个 li 都会得到绿色背景和白色字体颜色。如果它是奇怪的，它将被染成蓝色。

ul {
  margin-left: 15px;
}
li {
    background-color: blue;
    position: relative;
    height: 20px;
}
ul ul li {
    background-color: green;
    color: white;
}


li:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: -1000px;
  background: blue;
  width: 1000px;
  height: inherit;
}

ul ul li:before {
  background: green;
}

li:nth-child(odd), li:nth-child(odd):before {
     background-color: green;
}
li:nth-child(odd)::before {
     background-color: green;
}
li:nth-child(even) {
    color:white;
}

ul ul li:nth-child(odd), ul ul li:nth-child(odd):before {
     background-color: blue;
}
ul ul li:nth-child(odd)::before {
     background-color: blue;
}
ul ul li:nth-child(even) {
    color:black;
}

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho
    <ul>
      <li>ho</li>
      <li>ho</li>
      <li>ho</li>
      <li>ho</li>
      <li>ho</li>
    </ul>
    </li>
</ul>