2012-03-15 46 views
0
#messageContainer td 
    { 
     cursor: pointer; 
     border-bottom: 1px solid #2A2A2A; 
     padding-bottom: 3px; 
     padding-top: 3px; 
     background-color: #F0F0F0; 
    } 

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

HTML:CSS層疊和重要的問題

<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,但它似乎沒有任何區別。

回答

3

#messageContainer td.messageNew具有更高的特異性,所以會「贏」。嘗試:`#messageContainer .messageNew td(可以省略!important

+0

這工作,謝謝! – 2012-03-15 21:26:11

+0

欲瞭解更多深入的解釋,你也可以查看http://www.htmldog.com/guides/cssadvanced/specificity/ – Ryan 2012-03-15 22:09:16

+0

@JamesWilson如果這對你有用,你可能想接受解決問題的答案。 – steveax 2012-03-15 23:12:00

2

表格單元格上的背景顏色會覆蓋這些行上的背景顏色。

將您的選擇器更改爲.messageNew > td,您不再需要!important

+0

每個單元都有自己的背景,默認情況下是透明的。設置單元格背景顏色可消除透明度。從技術上講,它不會覆蓋行背景顏色;後者對於具有不透明背景的細胞並沒有發光。 – 2012-03-16 05:59:40

0

它看起來像你與messageNew類設置你的trbackgroundColor,但第一條規則的td設置backgroundColortr內,這將覆蓋tr小號即使使用!important也是如此。