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

Question

我有以下 table:

.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),
.table tbody tr:nth-child(4n+2) {
    background: rgb(247, 247, 247);
}

如何通过更改 table 内联的样式来实现同样的效果？我试过替换

<table class="table table-sm">

和

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

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

Answer 1

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

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

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

How can I change a row's background colour with nth-child inline?

html

css

css-selectors

inline-styles