使用Less或CSS重复以前的兄弟风格

Question

问题

是否有一种干净的方法可以为两个HTML元素之间的所有兄弟元素应用样式？

背景

我有一个带有bootstrap的.table-striped类的表，但是，我希望将任意数量的行作为一组条带化。我的解决方案是使用

创建自定义元素

document.registerElement("seq-tr");

并将tr:nth-child(odd/even)扩展为tr:nth-of-type(odd/even)，以及...tr:nth-of-type(odd/even) + seq-tr：

.table.table-striped {
    > thead, tbody, tfoot {
        > tr {
            ~ seq-tr > td {
                border-top: none;
                padding-top: 0;
                white-space: nowrap;
            }

            &:nth-of-type(even) {
                &, + seq-tr {
                    background-color: @table-bg;
                }
            }

            &:nth-of-type(odd) {
                &, + seq-tr {
                    &:extend(.table-striped > tbody > tr:nth-child(odd));

                    > td:extend(.table-striped > tbody > tr:nth-child(odd) > td) {
                    }
                }
            }
        }
    }
}

除此之外：最初我尝试使用~选择器而不是+，但是在第二个选项后，:nth-of-type(even)和:nth-of-type(odd)同时适用于每个<seq-tr>行和后来在编译的CSS文件中占据先例，而不是聪明一点，并寻找最近的兄弟<tr>是偶数还是奇数。

因此，上述代码适用于第一个<seq-tr>元素，但对于以下<seq-tr> s，它不适用。

是否有一种聪明的方法可以使这项工作适用于任意数量的连续<seq-tr>？

我可以使用seq-tr.striped课程，但我不愿意。

修改

我刚刚想到我可以简单地使用多个<tbody>元素，并根据这些行的偶数/奇数来设置行的样式，而不是行本身。

Can we have multiple <tbody> in same <table>?

我仍然喜欢我的问题的答案用于其他目的，但现在不太紧迫了。