如何根据表格行边框所在的 div 改变表格行边框的颜色

Question

我在一个页面上有多个div，每个div在每个页面上可能有一个或多个表。我希望每张桌子的顶部在顶部有一个颜色栏，我希望颜色由桌子所在的div确定。我希望能够将表从一个div移至另一个div而不修改桌子上的任何标记，并用它在div中指示的颜色栏渲染。

我无法访问更改表的标记（除非我在客户端上使用一些jQuery）。我确实有能力更新页面上使用的CSS，并且确实有能力在DIV级别添加/删除类。

<div id="Zone1" class="purple-zone">
    <table>
        <tr>
            <td id="cell1" class="cell-plain">Some content</td>
        </tr>
    </table>
</div>
<div id="Zone2" class="orange-zone"></div>
<div id="Zone3" class="green-zone"></div>

思考可能沿着这些行的某些CS：

.orange-zone.cell-plain
{
    border-top: 4px solid #f25316; /* orange */
}
.purple-zone.cell-plain
{
    border-top: 4px solid #631d76; /* purple */
}
.green-zone.cell-plain
{
    border-top: 4px solid #00a121; /* green */
}

这不起作用，我不确定如何在DIV级别上组合一个类以在TD级别定义颜色和类以用适当的颜色应用顶部边框。我认为CSS可能是可能的，但是我还没有找到可行的组合。

我希望上面的示例中的TD沿顶部有一个紫色的条定义在DIV级别。另外，只有与细胞层类别的DIV中的TD标签应具有此颜色棒的处理，并且在Div。

我希望这是有道理的。预先感谢。

Answer 1

您的选择器应如下：

.orange-zone .cell-plain {
    border-top: 4px solid #f25316; /* orange */
}
.purple-zone .cell-plain {
    border-top: 4px solid #631d76; /* purple */
}
.green-zone .cell-plain {
    border-top: 4px solid #00a121; /* green */
}

注意.orange-zone和.cell-plain之间的空间。这意味着.cell-plain是.orange-zone的后代，而.orange-zone.cell-plain将用于标记<div id="Zone1" class="orange-zone cell-plain">。