CSS背景顏色不適用於所有帶有類的單元格

我有一張表格，每隔一行應用一個背景顏色，以便使用:nth-child僞類輕鬆查看，但使用其他類通過應用來突出顯示某些信息與該單元格不同的背景顏色。CSS背景顏色不適用於所有帶有類的單元格

令人困惑的是，對於偶數行（原始樣式爲background-color: none;）應用了高亮顏色，但奇數行（樣式爲background-color: #C4A66F;）未應用新的高亮樣式。

圖片

Image of problem

正如你所看到的，高亮是零星的。當值等於或大於15時，它應該應用於'Inns'列單元格。類（tqual）按預期出現在html中。

HTML

下面的HTML是一種遍歷每行內，所以tqual類被正確地加入到細胞中與其中值是> = 15

<tr class="tdata"> 
    <td class="col-name"><?php echo $name; ?></td> 
    <td class="col-apps"><?php echo $apps; ?></td> 
    <td class="<?php if($inns>=15) echo "tqual ";?>col-inns"><?php echo $inns; ?></td> 
    [...] 
</tr>

CSS

tr.tdata:nth-child(even) td { 
    background-color: none; 
} 

tr.tdata:nth-child(odd) td { 
    background-color: #C4A66F; 
} 

td.tqual { 
    background-color: #DDDD00; 
}

任何想法？謝謝。

來源

2014-08-31 worldofjr

請仔細閱讀_selector specificity_。 – CBroe 2014-08-31 00:28:12

是的，但問題是它覆蓋了一個僞類，而不是另一個。 – worldofjr 2014-08-31 00:29:26

你在even TR TD沒有任何一套background-color - 因爲none是不是該屬性的有效值，使無效的聲明只是被忽略。（如果你想覆蓋已有一個來自另一個規則元素的背景顏色，那麼你必須使用默認值transparent得到「無背景色」。）

因此，與規則選擇器td.tqual能夠爲那些TD設置背景顏色，但不能爲odd TR中的那些設置背景顏色，因爲td.tqual是一個選擇器，其特異性比tr.tdata:nth-child(odd) td低。

（在你的第一條規則更改background-color到有效值，鐵red - 你會看到你的TD的沒有與tqual類將獲得黃色背景適用了。）

所以解決方案很簡單：使用至少具有相同特性的規則爲那些.tqual單元格提供背景顏色。（並修復了錯誤的background-color值none。）

來源

2014-08-31 00:42:36 CBroe

啊我明白了。 'tr.tdata td.tqual'修復了一些問題。出於興趣，我使用'background：none;'替換了一個普通的基於類的系統。我是否正確地說我有效地將'background-image'設置爲'none'，並且應用了'background-color'的默認值（我認爲它是「透明的」）。 – worldofjr 2014-08-31 00:59:22

是的，這是正確的。 – CBroe 2014-08-31 01:02:55

CSS背景顏色不適用於所有帶有類的單元格

回答

相關問題