html - 基于父元素类的 div 颜色

Question

我有一个表格，其中每一行的第一个单元格包含一个横跨整行的 div。我希望每个 div 的背景根据包含行的类别是不同的颜色。这可能吗？

类似的东西:

tr.even div.myDivClass{
    background-color: red;
}
tr.odd div.myDivClass{
    background-color: green;
}

这是表格的简化版本:

<table>
    <tr class="even">
        <td colspan="14">
            <div class="myDivClass"></div>
        </td>
    </tr>

    <tr class="odd">
        <td colspan="14">
            <div class="myDivClass"></div>
        </td>
    </tr>

    <tr class="even">
        <td colspan="14">
            <div class="myDivClass"></div>
        </td>
    </tr>

    <tr class="odd">
        <td colspan="14">
            <div class="myDivClass"></div>
        </td>
    </tr>
</table>

Answer 1

如果你想要替代颜色(这是你的代码正在做的)，你可以简单地使用以下而不定义任何类:

tr:nth-of-type(偶数){ 背景色:红色； } tr:第 n 个类型(奇数){ 背景色:绿色； }

如果您希望它是“任何”颜色，那么我认为您的代码没有问题。