如何使用 nth-child 内联更改行的背景颜色？

如何解决如何使用 nth-child 内联更改行的背景颜色？

我有下表：

.table tbody tr:nth-child(4n+1),.table tbody tr:nth-child(4n+2) {
    background: rgb(247,247,247);
}

<div class="container">
    <table class="table table-sm">
        <thead class="thead-default">
        <tr>
            <td>Column 1</td><td>Column 2</td>
        </tr>
        </thead>
    <tbody>
        <tr>
            <td>Column Data</td><td>Column Data</td>
        </tr>
        <tr>
            <td>Column Data</td><td>Column Data</td>
        </tr>
        <tr>
            <td>Column Data</td><td>Column Data</td>
        </tr>
        <tr>
            <td>Column Data</td><td>Column Data</td>
        </tr>
        <tr>
            <td>Column Data</td><td>Column Data</td>
        </tr>
        <tr>
            <td>Column Data</td><td>Column Data</td>
        </tr>
        <tr>
            <td>Column Data</td><td>Column Data</td>
        </tr>
        <tr>
            <td>Column Data</td><td>Column Data</td>
        </tr>
    </tbody>
</table>
</div>

我可以通过以下方式使用 CSS 更改第 n 行的背景颜色：

.table tbody tr:nth-child(4n+1),247);
}

如何通过更改内联表格的样式来做同样的事情？我已经尝试更换

<table class="table table-sm">

与

<table style="tr:nth-child(4n+1){background: rgb(247,247)}; tr:nth-child(4n+2){background: rgb(247,247)}" class="table table-sm">

但它不起作用。我对正确的语法有点困惑。

解决方法

内联样式仅与写入它的标签的元素相关（即没有选择器）。您必须将背景定义写入每个应应用的 td 中...

作为中间解决方案（介于外部样式表和内联样式之间），您可以在 HTML 代码中添加 <style> 标记并将 CSS 规则放入其中。