css - Bootstrap 表条纹 : how can I change the stripe step?

Question

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

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

我想让主行和可扩展行被视为单个 block 并使用一种颜色进行着色。

我的想法是将 strip 化的步长从每秒更改为每隔两对行。但我不知道该怎么做。

在 bootstrap.css 中有以下字符串负责 strip 化:

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

我想我需要将“奇数”参数更改为(4n-3 和 4n-2)之类的东西，但我不确定如何正确地进行。

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

Answer 1

Quote :

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula.

简而言之，是您可以将odd更改为4n-3，(第一个 child 的索引为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)