Css着色表問題

我一直在嘗試製作一個彩色表，偶數行的顏色不是奇數。我唯一的問題是，即使隱藏行，我也必須能夠做到這一點，因爲如果你隱藏第2行，那麼你看到第1行和第3行是相同的顏色。Css着色表問題

這是我有：

tr:not([display="none"]):nth-child(even){ 
    background: #EFEFFF; 
} 
tr:not([display="none"]):nth-child(odd){ 
    background: #E0E0FF; 
}

此代碼不爲我工作，因爲瀏覽器不過濾：不和：第n個孩子根據給定的順序。有什麼建議嗎？

2011-08-14 Gonzalo

你正在嘗試使用_element屬性selector_來選擇隱藏的元素，但'display'是一個CSS屬性。 –

Aaahh所以這是問題所在。任何方式都謝謝你）。我會嘗試給定的「班級解決方案」。 – Gonzalo

你能添加一個類的可見行，所以你可以寫爲：

tr.visible:nth-child(even) { 
    background: #EFEFFF; 
} 
tr.visible:nth-child(odd){ 
    background: #E0E0FF; 
}

然後使用jQuery添加/刪除類爲您做出行顯示/隱藏？

2011-08-14 03:55:34 boatcoder

+1打敗了我;） –

這是一個非常酷的把戲。我沒有意識到'nnth-child'在*選擇的集合上工作* - [CSS3規範]（http://www.w3.org/TR/css3-selectors/#nth-child-pseudo）使它像奇數或偶數的聲音是基於樹計算的。 – OverZealous

哈哈我以爲有人會想出解決方案。我只是想知道是否有解決方案看起來不像解決方法（沒有違法）。 – Gonzalo

在嘗試解決類似問題時結束了此處。過濾後，使用以下JS根據添加的類更新CSS。

$('tr.visible').filter(':odd').css('background-color', '#EFEFFF'); 
$('tr.visible').filter(':even').css('background-color', '#E0E0FF');

請注意由零索引數組引起的翻轉顏色。

2014-10-09 19:40:14

回答