css - 如何根据它所在的 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>

按照这些思路考虑一些 CSS:

.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 在顶部有一个紫色条，我希望能够在不以任何方式更改表格标记的情况下将该 TABLE 移动到不同的 DIV，并让它呈现新颜色在 DIV 级别定义。此外，只有 DIV 中类别为 cell-plain 的 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"> .