與隱藏要素

Question

交替背景色CSS表，我發現了一些對alternete使用Javascript的顏色，但我可以隱藏一些元素在我的表/數據網格，但這個CSS的背景顏色不正確交替：

CSS

.grid tr:not(.display-none):nth-child(2n+1) > td { 
    background: red; 
} 
.display-none * { 
    display: none; 
} 

HTML

<table class="grid"> 
    <tr><td>nono1</td></tr> 
    <tr><td>nono2</td></tr> 
    <tr><td>nono3</td></tr> 
    <tr><td>nono4</td></tr> 
    <tr class="display-none"><td>nono5</td></tr> 
    <tr><td>nono6</td></tr> 
    <tr><td>nono7</td></tr> 
    <tr><td>nono8</td></tr> 
</table> 

看到現場樣品

http://jsfiddle.net/WBn4U/

Answer 1

所以儘量

<table class="grid"> 
    <tr class="parent"><td>nono1</td></tr> 
    <tr class="parent"><td>nono2</td></tr> 
    <tr class="parent"><td>nono3</td></tr> 
    <tr class="parent"><td>nono4</td></tr> 
    <tr class="display-none"><td>nono5</td></tr> 
    <tr class="parent"><td>nono6</td></tr> 
    <tr class="parent"><td>nono7</td></tr> 
    <tr class="parent"><td>nono8</td></tr> 
</table> 

.parent:nth-child(odd) { 
     background-color: #fff; 
     } 
     .parent:nth-child(even) { 
      background-color: red; 
     } 

     /* after the first non-.parent, toggle colors */ 
     tr:not(.parent) ~ .parent:nth-child(odd) { 
      background-color: red; 
     } 
     tr:not(.parent) ~ .parent:nth-child(even) { 
      background-color: #fff; 
     } 

     /* after the second non-.parent, toggle again */ 
     tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(odd) { 
      background-color: #fff; 
     } 
     tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(even) { 
      background-color: red; 
     } 
     .display-none * { 
      display: none; 
     } 

http://jsfiddle.net/vA5Wz/

Answer 2

這是不可能的，因爲通過所有的子元素的:nth-child僞類週期。因此，您不能從選擇中排除元素 - 即使使用:not也是無效的。

Selectors Level 3 - 6.6.5. Structural pseudo-classes

獨立文本和其他非元素節點計算元件在它的父的子列表中的位置時，不計算在內。當計算在其父的孩子列表中的元素的位置，索引編號從1開始

我的理解是，所有元素節點在計算計數。通過說明不計算文本和其他非元素節點，所有元素節點都必須進行計算，如演示。

---

爲了解決這個問題，我建議通過JS從文檔中刪除元素。

爲了簡單起見，這裏是一些jQuery的：

$('table.grid tr.display-none').remove(); 

這樣做，你現在可以使用下面的選擇達到預期的效果：

table.grid tr:nth-child(2n+1) > td { 
    background: red; 
} 

jsFiddle example

Answer 3

給看看對此示例：

http://jsfiddle.net/KSL7j/1/

使用jQuery

jQuery('tr:visible').filter(':odd').css({'background-color': 'red'}); 
jQuery('tr:visible').filter(':even').css({'background-color': 'yellow'}); 

希望它可以幫助

Answer 4

純CSS（沒有JS）解決方案：

訣竅是用不同的標籤隱藏行，而不是類。 「table/tr/td」標籤必須去。在我的例子中，我使用「del」標籤來隱藏一行。如果顯示和其他屬性設置正確以模仿表格，則沒有區別。

.table { display: table; width: 100%; border-collapse: collapse; } 
 
.table .row { display: table-row; } 
 
.table .cell { display: table-cell; border: 1px solid silver; padding: 1em; } 
 

 
.table div.row:nth-of-type(odd) { background: ghostwhite; } 
 
.table del.row {display: none;}

<div class="table"> 
 
    <div class="row"><div class="cell">1</div><div class="cell">1 </div></div> 
 
    <div class="row"><div class="cell">2</div><div class="cell">Prime</div></div> 
 
    <div class="row"><div class="cell">3</div><div class="cell">Prime</div></div> 
 
    <del class="row"><div class="cell">4</div><div class="cell">2*2 </div></del> 
 
    <div class="row"><div class="cell">5</div><div class="cell">Prime </div></div> 
 
    <del class="row"><div class="cell">6</div><div class="cell">2*3 </div></del> 
 
    <div class="row"><div class="cell">7</div><div class="cell">Prime</div></div> 
 
</div>