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>

div内的Div条纹不起作用

1 个答案: