nth-child 没有在 table 中正确应用 background-color

Question

N-th child 仅将 background-color 应用于第二个 child 但不会继续。看看：https://snipboard.io/fnDY0r.jpg 有任何想法吗？我的 HTML-table 看起来像这样（对不起德语）：

<table class="Tabellen" id="Oeffnungszeiten">
    <caption>Aktuelle Öffnungszeiten (Frühling/Sommer 2020) </caption>
    <thead>
        <tr>
            <th>Wochentag</th>
            <th>Uhrzeit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Montag</td>
            <td>09.00 - 18.00 </td>
        </tr>
        <tr>
            <td>Dienstag</td>
            <td>09.00 - 18.00 </td>
        </tr>
        <tr>
            <td>Mittwoch</td>
            <td>09.00 - 17.00 </td>
        </tr>
        <tr>
            <td>Donnerstag</td>
            <td>09.00 - 20.00 </td>
        </tr>
        <tr>
            <td>Freitag</td>
            <td>08.00 - 20.00 </td>
        </tr>
        <tr>    
            <td>Samstag</td>
            <td>08.00 - 20.00 </td>
        </tr>
        <tr>
            <td>Sonntag</td>
            <td>10.00 - 20.00 </td>
        </tr>
    </tbody>
</table>

我的CSS：

tr:nth-child(2) {
    background-color: red;
}

Answer 1

如果你想添加 background-color for every 2nd child (every even child: 2, 4, 6... ), 你需要使用 nth-child(even)

查看 snippet 个 even、odd 个选择器。

Answer 2

使用

nth-child(even)

或

nth-of-child(2n)

Answer 3

如果你想让颜色在每一行之后重复，你需要使用 2n 或者你也可以在第 n 次通过 child。

tr:nth-child(2n) {
    background-color: red;
}

<table class="Tabellen" id="Oeffnungszeiten">
    <caption>Aktuelle Öffnungszeiten (Frühling/Sommer 2020) </caption>
    <thead>
        <tr>
            <th>Wochentag</th>
            <th>Uhrzeit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Montag</td>
            <td>09.00 - 18.00 </td>
        </tr>
        <tr>
            <td>Dienstag</td>
            <td>09.00 - 18.00 </td>
        </tr>
        <tr>
            <td>Mittwoch</td>
            <td>09.00 - 17.00 </td>
        </tr>
        <tr>
            <td>Donnerstag</td>
            <td>09.00 - 20.00 </td>
        </tr>
        <tr>
            <td>Freitag</td>
            <td>08.00 - 20.00 </td>
        </tr>
        <tr>    
            <td>Samstag</td>
            <td>08.00 - 20.00 </td>
        </tr>
        <tr>
            <td>Sonntag</td>
            <td>10.00 - 20.00 </td>
        </tr>
    </tbody>
</table>

nth-child 没有在 table 中正确应用 background-color

nth-child doesnt apply background-color correctly in the table

html

css

css-selectors

css-tables