条带引导表:如何更改条带步骤？

Question

我正在使用Bootstrap并有条纹表.为了显示更详细的需求信息,我每隔一行就会崩溃一次.折叠(但不是条纹)表, Twitter Bootstrap在表格单元格上使用collapse.js [几乎完成]

问题在于,使用默认行为时,所有"主"表行都以相同颜色着色,并且当折叠所有可扩展行(包含详细信息)时,表不会显示条带.这是因为可扩展行"打破"着色顺序.

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

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

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

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

我想我需要将'odd'参数更改为类似(4n-3和4n-2),但我不确定如何正确执行.

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

Answer 1

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

简而言之,是的,你可以odd改为4n-3,(第一个孩子的索引是1).

键:

注意:键1/2 p:nth-child(odd)的示例将是键3/4/5(以a + b表示)的示例p:nth-child(4n-3)