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

这应该有效：

我将每个li的颜色设置反转为嵌套在两个ul内。

因此，每个人都会在两个内部获得绿色背景和白色字体颜色。如果奇怪的是它会变成蓝色。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

@Robert的回答并不是很有效。您需要使用多个嵌套:nth-child()来容纳所有可能的组合：

＆＃13;

＆＃13;

hr {
  margin: 60px 0;
}

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(even) {
    color:white;
}


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;
}

/* parent is green so set odd blue */
li:nth-child(odd) li:nth-child(odd){
     background-color: blue;
     color: #fff;
}
li:nth-child(odd) li:nth-child(odd)::before {
     background-color: blue;
}

/* parent is green so even to green */
li:nth-child(odd) li:nth-child(even){
     background-color: green;
     color: #000;
}
li:nth-child(odd) li:nth-child(even)::before {
     background-color: green;
}

/* correct the text colour for nested elements */
li:nth-child(even) li:nth-child(odd){
     color: #000;
}
li:nth-child(even) li:nth-child(even){
     color: #fff;
}

＆＃13;

<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>

<hr>

<ul>
    <li>ho</li>
    <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>

＆＃13;

＆＃13;

＆＃13;