html - 奇数展示儿童的风格

Question

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

这是一个实时沙箱：http: //jsfiddle.net/zrges/1/

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

我无法使用好的伪类、css 选择器来处理它。

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

非常感谢！

Answer 1

看看这个：http: //jsfiddle.net/qbXVV/18/

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>​

CSS：

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

    .hidden {
        display:none;   
    }​

JS：

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

Answer 2

CSS：

tr.sub { display: none; }
​.color { background: blue; }​

js：

$(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');
    });
});​

Answer 3

对于表，您可以使用

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

或者

tr:nth-child(2n+0) { // your style }
tr:nth-child(2n+1) { // your style}