[多层ul中的CSS交替行样式

Question

我喜欢在树上添加交替的行样式。由于每个级别都有自己的ul / li，因此第n个子选择器（父级的第n个子）无法解决我的问题。看起来好像不对。

如何使用纯CSS解决此问题？

li:nth-child(odd)>div {
  background-color: lightblue;
}

JSFiddle：https://jsfiddle.net/56nsgL1u/

Answer 1

只需在根目录id上添加一个ul，使您的css更精确：

#tree > li:nth-child(2n + 1) > div {
  background-color: lightblue;
}

<ul id="tree">
  <li>
    <div>AAAA</div>
    <ul>
      <li>
        <div>Node 1</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
      <li>
        <div>Node 4</div>
      </li>
    </ul>
  </li>
  <li>
    <div>BBBB</div>
  </li>
  <li>
    <div>CCCC</div>
    <ul>
      <li>
        <div>Node 1</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
    </ul>
  </li>
</ul>