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中的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">。

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

1 个答案: