奇数展示儿童的风格答案

【问题标题】：Style for odd displayed children奇数展示儿童的风格
【发布时间】：2012-04-18 14:14:28
【问题描述】：

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

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

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

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

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

非常感谢！

【问题讨论】：

这已经被问过很多次了（但是我在寻找一个 good 副本时遇到了各种各样的麻烦）；答案仍然是否定的，除非有某种模式，否则你不能使用纯 CSS 选择器来做到这一点。
@BoltClock'saUnicorn 我在寻找答案时遇到了同样的困难。所以如果你说它是重复的，我很抱歉，我会尽力找到所有的答案。谢谢

标签： html css css-selectors

【解决方案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");
});
});

【讨论】：

【解决方案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');
    });
});

【讨论】：

【解决方案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}

【讨论】：

:nth-child 选择器只查看兄弟位置，而与其他选择器无关。因此，这不会按照问题的要求排除隐藏的孩子。