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

【问题标题】：CSS nth-child from only elements with class仅来自具有类的元素的 CSS nth-child
【发布时间】：2021-08-12 22:27:40
【问题描述】：

我正在使用 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>

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

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

请任何人建议我的问题的解决方案或帮助我了解我是如何遗漏 :nth-of-type 的。

谢谢

【问题讨论】：

你可以按照这个帖子在v-for https://stackoverflow.com/questions/49675988/how-to-get-the-v-for-index-in-vue-js中使用INDEX，如果索引是偶数的话，使用这个索引来动态添加类，希望对你有一点帮助
@NotTheWaquar 谢谢你的帖子，我可以用它来找到我的答案，我把它贴在下面

标签： html css vue.js

【解决方案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>

【讨论】：