时间戳

首页 > 解决方案 > nth-child 没有在表格中正确应用背景颜色

html - nth-child 没有在表格中正确应用背景颜色

问题描述

第 N 个孩子仅将背景颜色应用于第二个孩子，但不会继续。看看：https ://snipboard.io/fnDY0r.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;
}

标签： htmlcsscss-selectorscss-tables

解决方案

如果要background-color为每个第二个孩子添加（每个偶数孩子：2、4、6 ...），您需要使用nth-child(even)

看看这个,选择器的片段。evenodd

推荐阅读