不要計算表格中的特定 TR，並將 Even/Odd CSS 樣式應用於所有其他

Question

我想設計一個表格，每隔一行給一個藍色背景色。

但是，我想忽略此樣式規則中的特定行 - 第二行。

這意味着即使有 4 行，我想把它們當作 3 行，所以第 1 行是奇數，第 2 行不存在，第 3 行是偶數，第 4 行是奇數。

我嘗試對所有常規行使用not或定義reg class，但沒有幫助。

我的預期結果是第 3 行為藍色。 事實上結果：第 4 行是藍色的。

（我的目標邏輯：在我的真實項目中，第 2 行並不是真正的“行”，我用它來添加與第 1 行相關的信息）

 tr td { vertical-align: top; } td { width: 100px; height: 100px; background-color: green; } table#aa tr:not(.jack):nth-child(even) td { background-color: blue; } table#bb tr.reg:nth-child(even) td { background-color: blue; }

 <table id="aa"> <tr> <td></td> <td></td> </tr> <tr class="jack"> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <div>another try</div> <table id="bb"> <tr class="reg"> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr class="reg"> <td></td> <td></td> </tr> <tr class="reg"> <td></td><td></td> </tr> </table>

編輯：

• 我不一定只有 4 行。 在另一個例子中我可能有 20 個。

• 在此特定示例中，第二行是第二行。 但它可以
  另一個例子中的第三個或第四個。 主要問題是如何跳過它，而不使用任何“固定”定義。

Answer 1

更新了答案，請查看此代碼筆以獲取工作示例：

https://codepen.io/niorad/pen/dJrqGp

可能有一些同胞戲弄。

table .out:not(:nth-child(odd)) ~ tr:nth-child(even) td {
  background-color: blue;
}

table .out:not(:nth-child(odd)) ~ tr:nth-child(odd) td {
  background-color: green;
}

table .out:not(:nth-child(even)) ~ tr:nth-child(even) td {
  background-color: blue;
}

table .out:not(:nth-child(even)) ~ tr:nth-child(odd) td {
  background-color: green;
}

Answer 2

:odd和:even選擇器將考慮所有兄弟姐妹。 您必須結合一些CSS規則才能獲得所需的內容。

td{width:100px;height:100px;background-color: green}

table#aa tr:nth-child(odd) td {
    background-color: blue;
}
table#aa tr.jack td {
    background-color: red;
}
table#aa tr:first-child td {
    background-color: green !important;
}

由於您希望第三行為藍色，因此最好選擇奇數行，這將自動使第三行為藍色。 第一個可以強制為綠色，第二個可以強制為紅色背景色，或者根據需要添加一些不同的樣式。

我有這個jsFiddle給你

Answer 3

這應該工作...

jQuery解決方案

這將選擇所有不具有所選類的行，對其進行過濾並為每個替代行上色為紅色。

 $("table tr:not('.jack')").filter(":odd").children().css("background-color", "red"); 

 tr td { vertical-align: top; } td { width: 30px; height: 30px; background-color: green; color: white; } .jack td { background: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="aa"> <tr> <td>1</td> <td>1</td> </tr> <tr class="jack"> <td>Not here</td> <td>Not here</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> </tr> <tr> <td></td> <td></td> </tr> </table> 

Answer 4

也許只是在您不想計算的那些之上添加一個虛擬<tr></tr> ？

<table>
  <tr><td>odd row</td></tr>
  <tr id="dummy"></tr>
  <tr><td>skip count</td></tr>
  <tr><td>even row</td></tr>
</table>