我上的在线课程不是很好,现在我可以依靠的人通常也找不到问题。
在我的<style>
标记中,我将所有<td>
标记都设置为background-color:#7A7A7A;
,嗯...这现在显示在tr.whiteback
CSS设置上,应显示为{ {1}}
这是整个代码文件,显示了粘贴在Pastebin中的整个结构
结果:
期望的效果:“课堂时间”行应具有白色背景,但具有其他数据单元的灰色背景,这是我不希望的。
答案 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>