如何停止由tr樣式覆蓋colgroup樣式？

嗨，大家好我有這樣的桌子嗎？如何停止由tr樣式覆蓋colgroup樣式？

<table> 

<colgroup> 
    <col class="selected"> 
    <col> 
</colgroup> 

    <tbody> 
     <tr> 
      <td>lorem</td> 
      <td>lorem</td> 
     </tr> 
    </tbody> 
</table>

，我的風格是：

col.selected { 
background-color: #f3f3f3; /*for selected column*/ 
} 

table tbody tr:nth-of-type(2n+2){ 
background-color:#fafafa; /*zebra effect*/ 
}

所有的偉大工程，不過zerba風格owerites山坳選擇風格。任何想法如何避免，所以選定的專欄將使用col而不是第n個孩子的風格？

來源

2011-11-19 Marcin

請新增工作示例... –

看到上面的一個 - 100％完全工作 – Marcin

據我所知，你不能。最好的解決方法可能是動態呈現一些突出顯示正確列的CSS。要突出一個表的第二列，例如，你可以使用：

table tbody tr td:nth-child(2) { 
    background-color:red; 
}

這裏舉例： http://jsfiddle.net/ChrisPebble/tbLrv/

來源

2011-11-19 13:01:33

這是一些解決方案，但... – Marcin

你一定可以。 – Madbreaks

您的代碼看起來不錯，但您的HTML中沒有應用選定的類。這可能是你的問題在實際頁面上（我放棄你只發布了一個代碼示例）。

來源

2011-11-19 12:52:12

不，這是thorugh JS等完成，但爲了避免confusin我會更新quetsion – Marcin

還上面的代碼是OK，我知道，但事情是col.selected風格被覆蓋在第n行，我的問題是這是否可以避免或不，謝謝 – Marcin

一個工作示例將有所幫助，但請記住，CSS應用自上而下。因此，如果斑馬和選擇css都適用於col，那麼您的底部css將會勝出。 –

的問題是，爲zebra背景選擇具有比col選擇更高specificity 。給col選擇器一個更高的特異性，或給tr選擇器一個較低的（或兩者）。如果它們相同，則CSS中的規則順序很重要。

table colgroup col.selected { 
    background-color: #f3f3f3; /*for selected column*/ 
} /* specificity: 13 */ 

table tr:nth-of-type(2n+2){ 
    background-color:#fafafa; /*zebra effect*/ 
} /* specificity: 12, will be overridden */

來源

2013-05-09 19:02:16 Madbreaks

TIL約**特異性**。謝謝！ –

如何停止由tr樣式覆蓋colgroup樣式？

回答

相關問題