基于父元素类的div颜色答案

【问题标题】：Color of div based on parent element's class基于父元素类的div颜色
【发布时间】：2016-07-09 05:02:06
【问题描述】：

我有一个表格，其中每行的第一个单元格包含一个跨越整行的 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>

【问题讨论】：

您的代码对我来说似乎可以正常工作。
我从我的实际应用中简化了很多。没有尝试简化版本...哇，它有效....那么我一定在我的实际页面中做错了什么。谢谢
您可以尝试右键单击元素并选择“检查元素”。这应该指向页面中导致颜色与预期不同的确切类。

标签： html css

【解决方案1】：

如果您想要其他颜色（这是您的代码正在做的事情），您可以简单地使用以下内容而不定义任何类：

tr:nth-of-type(even) { background-color: red; } tr:nth-of-type(odd) { background-color: green; }

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

【讨论】：