Html 奇数显示子项的样式

我正在寻找一种方法，将一些特定样式应用于显示的奇数（或偶数）子项（因此排除隐藏子项）。 另外，如果在显示隐藏的子项时应用该样式，那将是完美的

这是一个实时沙盒：

这就是我在视觉上想要的：（当然，这只是一个显示示例，不要理会我为此编写的蹩脚代码）

我无法使用好的伪类，css选择器来处理这个问题

我希望有一个完整的css/html解决方案（而不是js/php解决方案，这更简单）

---

多谢各位

对于表格，您可以使用

tr:nth-child(even) { // your style }
tr:nth-child(odd) { // your style}

或

css:

js:

看看这个：

HTML：

<button id="toggle">Toggle it!</button>
 <table>
  <tr class="sub"><td>Row 1</td></tr>
  <tr class="tag"><td>Row 2</td></tr>
  <tr class="sub"><td>Row 3</td></tr>
  <tr class="tag"><td>Row 4</td></tr>
  <tr class="sub"><td>Row 5</td></tr>
  <tr class="tag"><td>Row 6</td></tr>
  <tr class="sub"><td>Row 7</td></tr>
 </table>​

JS：

$(document).ready(function () {
$('#toggle').click(function () {
    $('.tag').toggleClass("hidden");
    $(".sub:nth-child(4n+1)").toggleClass("bg");
});
});​

---

这已经被问了很多次了（但是我在寻找一个好的副本时遇到了各种各样的困难）；答案仍然是否定的，除非有某种模式，否则你不能用纯CSS选择器来实现它。@BoltClock'sSanicorn我也有同样的困难来找到答案。因此，如果你说这是一个重复，我很抱歉，并将试图找到所有的答案。谢谢选择器只查看同级位置，而不考虑其他选择器。因此，这不会排除问题中要求的隐藏子项。

$(document).ready(function () {
    $('table tr:visible:even').addClass('color');

    $('#toggle').click(function () {
        $('table tr').removeClass('color');
        $('table tr.sub').toggle();
        $('table tr:visible:even').addClass('color');
    });
});​

<button id="toggle">Toggle it!</button>
 <table>
  <tr class="sub"><td>Row 1</td></tr>
  <tr class="tag"><td>Row 2</td></tr>
  <tr class="sub"><td>Row 3</td></tr>
  <tr class="tag"><td>Row 4</td></tr>
  <tr class="sub"><td>Row 5</td></tr>
  <tr class="tag"><td>Row 6</td></tr>
  <tr class="sub"><td>Row 7</td></tr>
 </table>​

     tr:nth-of-type(even),.bg {
        background-color: gray;
     }

    .hidden {
        display:none;   
    }​

$(document).ready(function () {
$('#toggle').click(function () {
    $('.tag').toggleClass("hidden");
    $(".sub:nth-child(4n+1)").toggleClass("bg");
});
});​