2

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

我想要两种不同的颜色，一种用于thclass="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元素上使用不同的颜色

4

1 回答 1

2

您需要以下内容：

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

标签和类名之间没有空格。

于 2013-09-27T18:42:31.630 回答