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(even) { background-color: red; } tr:nth-of-type(odd) { background-color: green; }

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