第nth-child没有在表中正确应用背景色[重复] 。

Question

这个问题在这里已经有了答案:

选择CSS中的第N个元素 (4个答案)

封闭 上月.

第N个子代只将背景色应用于第2个子代，而没有继续应用。请看一下。https:/snipboard.iofnDY0r.jpg我的HTML表是这样的(对不起，是德国人)。

<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 对于 每一 第2个孩子（每一个偶数孩子：2，4，6...），你需要用 nth-child(even)

看看这个 片段 的 even, odd 选择器。

Answer 2

如果你想让颜色在每一行之后重复，你需要使用2n，或者你也可以在第n个子代中传递。

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>

Answer 3

使用

nth-child(even) 

或

nth-of-child(2n)