Question

我在使用类选择器设置表格时遇到问题。

我想要两种不同的颜色，一种用于th元素，其中class =“pause”，另一种颜色在td元素上，具有相同的类名。

为什么这个CSS不起作用：

.timetable th .pause {
    background-color:#F99;
}
.timetable td .pause {
    background-color:#FEE;  
}

关于这个HTML？

<table class="timetable">
<thead>
    <tr>
        <th>Tispunkt</th>
                <th style='height:30px;'>08:00</th>
        <th style='height:30px;'>08:30</th>
        <th style='height:30px;'>09:00</th>
        <th style='height:15px;'>09:30</th>
        <th style='height:15px;' class='pause'>09:45</th>
        <th style='height:30px;'>10:00</th>
        <th style='height:30px;'>10:30</th>
        <th style='height:30px;'>11:00</th>
        <th style='height:30px;'>11:30</th>
        <th style='height:30px;'>12:00</th>
        <th style='height:30px;' class='pause'>12:30</th>
        <th style='height:30px;'>13:00</th>
        <th style='height:30px;'>13:30</th>
        <th style='height:30px;'>14:00</th>
        <th style='height:30px;'>14:30</th>
        <th style='height:30px;'>15:00</th>
        <th style='height:30px;'>15:30</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Maskine 4</td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:15px;'></td>
        <td style='height:15px;' class='pause'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;' class='pause'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
        <td style='height:30px;'></td>
    </tr>
</tbody>

这个CSS有效

.timetable .pause {
    background-color:#F99;  
}

但我想在th元素和td元素

上使用不同的颜色

Answer 1

您需要以下内容：

.timetable th.pause {
    background-color:#F99;
}
.timetable td.pause {
    background-color:#FEE;  
}

标签与班级名称之间没有空格。

CSS - .first class td .second class不起作用

1 个答案: