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

Question

我有下表：

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

但它不起作用。 我對正確的語法有點困惑。

Answer 1

內聯樣式僅與寫入標簽的元素相關（即沒有選擇器）。 您必須將背景定義寫入應應用的每個td ...

作為中間解決方案（在外部樣式表和內聯樣式之間），您可以在 HTML 代碼中添加<style>標記，並將 CSS 規則放在那里。