Bootstrap表条纹：如何更改条纹步骤？

Question

我正在使用 Bootstrap 并且有一个条纹表。为了显示更多关于需求的详细信息，我每隔两行折叠一次。 折叠（但不是条纹）桌子， Twitter Bootstrap Use collapse.js on table cells [Almost Done]

问题是，在默认行为下，所有“主”表行都以相同颜色着色，并且当所有可扩展行（带有详细信息）都折叠时，表看起来没有条纹。这是因为可扩展行“破坏”了着色顺序。

我希望将主行和可扩展行视为单个块并使用一种颜色进行着色。

我的想法是将条带化的步骤从每秒更改为每秒对行。但我不知道该怎么做。

在 bootstrap.css 中有以下字符串负责条带化：

...
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
   background-color: #f9f9f9;
}
...

我想我需要将“奇数”参数更改为（4n-3 和 4n-2）之类的参数，但我不确定如何正确执行。

是否可以更改条带化步骤，如果可以，我该怎么做？

Answer 1

Quote:

:nth-child(n) 选择器匹配其父元素的第 n 个子元素，无论其类型如何。 n 可以是数字、关键字或公式。

总之可以你可以把odd改成4n-3，（第一个孩子的索引是1）。

键：

1. odd：用于匹配索引为奇数的子元素。
2. even：用于匹配索引为偶数的子元素。
3. a：代表一个循环大小
4. n：从 0 开始的计数器
5. b：一个偏移值

注意：键 1/2 的示例为 p:nth-child(odd)，键 3/4/5（以 an+b 表示）的示例为 p:nth-child(4n-3)