css - Bootstrap 4 beta(最新版)改变条纹表格的颜色

Question

我有一个条纹表编码如下:

<table class="table-sm table-hover table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                   ...
            </tbody>
        </table>

我使用的是最新的 Bootstrap 4 beta 版本。我想更改 Bootstrap 用于“条纹”行的交替颜色。我无法在文档中找到任何内容。根据 Stack Overflow 上一篇已有四年历史的帖子，我可以添加自己的 css 文件。但是，如果可能的话，我希望仅使用 Bootstrap 类来完成此操作。

感谢您的帮助，马克

Answer 1

如果您检查演示页面上的元素 Bootstrap v4 tables你会看到他们的目标是 Bootstrap .table-striped 类。具体来说，奇数行。这是一个应该可以帮助的演示 JSfiddle .

.table-striped tbody tr:nth-of-type(odd) {
    background-color: red;
}