分区内分区内的分区不工作

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>

​