html - 全局 <td> 标签在后台写入 <tr> 标签中指定的类

标签 html css

我正在参加一个不太好的在线类(class),现在我可以依靠的人通常也找不到问题的帮助。

在我的 <style>标签,我设置所有<td>标记为 background-color:#7A7A7A;啊...现在正在显示 tr.whiteback应显示为 background-color:#FFFFFF; 的 CSS 设置

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

https://pastebin.com/tX1eAz9u

结果:

enter image description here

期望的效果:“Class Times”行应该有白色背景,但它有其他数据单元格的灰色背景,这是我不想要的。

最佳答案

让我失望的是你在受影响行的第一个 td 上有 class="whiteback"。这告诉我,作为一名代码阅读者,你只是想把那个变成白色,而让另一个 tds 变成灰色。

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

我在第一个 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>

关于html - 全局 <td> 标签在后台写入 <tr> 标签中指定的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58790839/

相关文章:

css - 如何在内联 block 内垂直居中 float div?

html - 将绝对定位的 div 居中

css - jumbotron 上的不透明度

javascript - iOS Webkit 只读输入可选择吗?

javascript - 将元素始终定位在死点的流体图像上方?

javascript - 动态设置TextArea宽度

html - 我如何在按钮菜单上添加声音

javascript - 图像不动

javascript - 如何在 jQuery 中仅包装选定的元素

javascript - 尝试用Javascript编写jQuery fadeTo效果