html - CSS nth-child 仅来自具有类的元素

Question

我正在使用 vue 的 v-if 来动态显示和隐藏表格元素，并且我为这些元素使用了斑马纹背景。问题是当我显示一行时，背景颜色会发生变化，因为表格中现在有不同数量的元素。这看起来很困惑，所以我希望隐藏的行不影响格式，这样斑马纹颜色保持一致。

下面是我用来突出所有其他 tr 元素的 css:

.content-table {
    .table-content {
        table {
            tbody {
                tr:nth-child(even) {
                    background-color: #00ff0d;
                }
            }
        }
    }
}

以及我正在使用的代码的简化示例

<tbody>
    <template v-for="item in list">
        <tr class="zebra">
            //blah
        </tr>

        <tr v-if="item.accordion">
            //blah
        </tr>
    </template>
</tbody>

默认情况下，每个元素的 accordion 属性为 false，因此单击展开将显示这一新行，并更改表格中其下方所有元素的背景颜色。

我知道使用 CSS 的 .zebra:nth-of-type(even) 选择器，因为我看过类似问题的示例，但据我所知，这对我的代码不起作用，就好像我只选择了第一个使用类的一组 tr 元素，它仍将计算同一父类中的所有 tr 元素。

任何人都可以为我的问题提出解决方案，或者帮助我理解我是如何错过 :nth-of-type 的东西的。

谢谢

Answer 1

我能够使用 vue 的条件样式获得我想要的格式。

<tbody>
    <template v-for="(item, index) in list">
        <tr :style="(index % 2 == 0) ? {'background-color': '#f7f8f9'} : {'background-color': '#f1f3f5'}">
            //blah
        </tr>

        <tr v-if="item.accordion">
            //blah
        </tr>
    </template>
</tbody>