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}

奇数儿童的风格

3 个答案: