全局<td>标记具有覆盖<tr>标记中指定的类的背景

时间:2019-11-10 16:49:42

标签: html css

我上的在线课程不是很好,现在我可以依靠的人通常也找不到问题。

在我的<style>标记中,我将所有<td>标记都设置为background-color:#7A7A7A;,嗯...这现在显示在tr.whiteback CSS设置上,应显示为{ {1}}

这是整个代码文件,显示了粘贴在Pastebin中的整个结构

https://pastebin.com/tX1eAz9u

结果:

enter image description here

期望的效果:“课堂时间”行应具有白色背景,但具有其他数据单元的灰色背景,这是我不希望的。

1 个答案:

答案 0 :(得分:2)

我不高兴您在受影响的行中的第一个日有class="whiteback"。那告诉我,作为代码阅读器,您只是在尝试将其中一个白色变成白色,而另一种tds变成灰色。

如果您的目标只是使用行上的“ whiteback”类覆盖td样式,则只需为选择器添加一些额外的特殊性。

我在第一个交易日取下class="whiteback",因为似乎您不需要它(不确定您在那儿做什么)-我也更改了CSS以选择.whiteback td.whiteback

.whiteback, .whiteback td {
  background-color:#FFFFFF;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Stylish Schedule Assignment</title>
        <style>
            table {
                border:solid;
                border-color:#2A2A2A;
                color:#000000;
                background-color:#3A3A3A;
                margin:5px;
            }
            .red16 {
                color:#FF0000;
                font-size:16px;
            }
 
            .blue16 {
                color:#0000FF;
                font-size:16px;
            }
 
            .green18 {
            color:#00FF00;
            font-size:18px;
            }
 
            .whiteback, .whiteback td {
            background-color:#FFFFFF;
            }
 
            td {
                background-color:#7A7A7A;
            }
 
            th {
            background-color:#FFFFFF;
            }
 
            tr.whiteback {
            background-color:#FFFFFF;
            }
        </style>
    </head>
    <body>
        <table>
            <caption class="whiteback">Schedule</caption>
            <tr>
                <th>Blocks</th>
                <td>A block</td>
                <td>B block</td>
                <td>C block</td>
                <td>D block</td>
            </tr>
            <tr>
                <th>Class</th>
                <td>Vocational School</td>
                <td>Vocational School</td>
                <td>Online Course</td>
                <td>Creative Writing</td>
            </tr>
            <tr>
                <th>Grade</th>
                <td class="blue16">89</td>
                <td class="blue16">89</td>
                <td class="green18">94</td>
                <td class="red16">79</td>
            </tr>
            <tr class="whiteback">
                <th>Class times</th>
                <td colspan="2" style="text-align:center;">7:45 - 10:15</td>
                <td>10:45 - 12:00</td>
                <td>12:00 - 1:15</td>
            </tr>
        </table>
    </body>
</html>