jquery - 如何为三个选项卡中的每个表格制作不同的重复颜色？

Question

我有三个选项卡。每个选项卡都有一个表格。选项卡中的每一个表格都在表格背景中重复出现浅蓝色。我希望每张 table 在背景中都有不同的重复颜色。因此每个选项卡都会有一个具有不同背景重复颜色的表格。

• 我希望 tab-1 有一个包含重复出现的颜色 1 的表格
• tab-2 有一个带有重复出现的颜色 2 的表格
• tab-3 有一个带有重复出现的颜色 3 的表格

因此每个选项卡中都有一个表格，其中重复出现的背景颜色不同。

http://jsfiddle.net/Lance_Bitner/4zLkb6v0/

 tr:nth-child(even) {
  background-color: rgba(197, 232, 255, .2);
  }

Answer 1

除非您愿意为选项卡或表格添加类或 ID，否则您需要通过选项卡索引来引用每个表格。由于 nth-child 伪选择器不适用于基于类的选择器，因此您需要选择选项卡的子 div:

.tabs > div:nth-child(2) table tr td {
  color: red;
}

然后你可以随心所欲地做斑马条纹:

.tabs > div:nth-child(2) table tr:nth-child(even) td {
  color: blue;
}

Demo