如何使用 nth-child inline 更改行的背景颜色？答案

【问题标题】：How can I change a row's background colour with nth-child inline?如何使用 nth-child inline 更改行的背景颜色？
【发布时间】：2021-02-13 06:08:08
【问题描述】：

我有下表：

.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 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">

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

【问题讨论】：

你不能因为style属性只接受CSS属性，不接受选择器。

标签： html css css-selectors inline-styles

【解决方案1】：

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

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

【讨论】：