html - Div 条纹内的 Div 不起作用

Question

我正在尝试创建类似于条纹电子表格的条纹 div。我正在创建一种依赖于 div 创建的表格的格式。

当我尝试实现 nth-child 或 nth-of-type 时，我总是得到错误的输出。有人可以帮我吗？我一直在努力寻找解决方案，但无济于事。

这是我的代码。

HTML

<div>
  <div class="tab1">
    1
    <div class="tab2">
      2
    </div>
  </div>
</div>
<div>
  <div class="tab1">
    3
    <div class="tab2">
      4
    </div>
  </div>
</div>

重复...

CSS

.tab1 {
  background-color: red;
}
.tab2 {
  background-color: orange;
}
div:nth-of-type(odd) .tab1 {
  background-color: green;
}
.tab1:nth-child(odd) .tab2{
  background-color: yellow;
}

http://jsfiddle.net/abnqo501/

编辑:对于彩色条纹，它应该按顺序返回绿色、黄色、红色和橙色。

如果有人也可以帮助我扩展这个，那就太好了。

如果我想展开再添加一个div，比如

<div>
  <div class="tab1">
     1
     <div>
       2
     </div>
   </div>
</div>

我将如何更改语法？来自 div:nth-child(odd) > .tab1 tab2

Answer 1

正如我在评论中所说，.tab1:nth-child(odd) 将始终为奇数编号，因为 .tab1 是该级别中的唯一元素。

所以你必须使用这个 css:

div:nth-child(odd) > .tab1 .tab2{
  background-color: yellow;
}

看看:

.tab1 {
  background-color: red;
}
.tab2 {
  background-color: orange;
}
div:nth-of-type(odd) .tab1 {
  background-color: green;
}
div:nth-child(odd) > .tab1 .tab2{
  background-color: yellow;
}

<div>
  <div class="tab1">
    1
    <div class="tab2">
      2
    </div>
  </div>
</div>
<div>
  <div class="tab1">
    3
    <div class="tab2">
      4
    </div>
  </div>
</div><div>
  <div class="tab1">
    1
    <div class="tab2">
      2
    </div>
  </div>
</div>
<div>
  <div class="tab1">
    3
    <div class="tab2">
      4
    </div>
  </div>
</div><div>
  <div class="tab1">
    1
    <div class="tab2">
      2
    </div>
  </div>
</div>
<div>
  <div class="tab1">
    3
    <div class="tab2">
      4
    </div>
  </div>
</div>

编辑

---

编辑问题后，代码如下:

.tab1 {
  background-color: red;
}

div:nth-child(even) > .tab1 > div {
  background-color: orange;
}

div:nth-of-type(odd) .tab1 {
  background-color: green;
}

.tab1:nth-child(odd) > div {
  background-color: yellow;
}

<div> 
  <div class="tab1"> 1 
    <div> 2 </div> 
  </div> 
</div>
<div> 
  <div class="tab1"> 3 
    <div> 4 </div> 
  </div> 
</div>