Question

#messageContainer td 
    {
        cursor: pointer;
        border-bottom: 1px solid #2A2A2A;
        padding-bottom: 3px;
        padding-top: 3px;
        background-color: #F0F0F0;
    }

    .messageNew
    {
        background-color: #FFFFFF !important;
    }

HTML：

<tr replytoid="3" messageid="2700" id="15" class="messageNew">
    <td>&nbsp;&nbsp;<input type="checkbox" name="checkAll"></td>
    <td>Rick Hagar</td>
    <td>asd</td>
    <td>3/14/2012 1:09:04 PM</td>
</tr>

我无法弄清楚我做错了什么。现在，因为每个<td>都有#F0F0F0背景颜色。并且类.messageNew的行不会更改为背景颜色#FFFFFF。

更奇怪的是，如果我扭转了颜色。我删除了背景颜色#F0F0F0并更改#FFFFFF它正常工作。

客户希望它已更改，因此新消息现在具有白色背景，并且阅读消息具有#F0F0F0背景。

我添加了!important，但似乎没有任何区别。

Answer 1

#messageContainer td具有比.messageNew更高的特异性，因此将“获胜”。尝试：`#messageContainer .messageNew td（您可以省略!important）

Answer 2

表格单元格的背景颜色会覆盖行上的颜色。

将您的选择器更改为.messageNew > td，您将不再需要!important。

Answer 3

看起来您使用backgroundColor类在tr上设置messageNew，但第一条规则设置backgroundColor内的td tr，即使使用tr也会覆盖!important的颜色。

CSS Cascading和！重要问题

3 个答案: