选择特定css类的偶数行答案

【问题标题】：Selecting even rows of specific css class选择特定css类的偶数行
【发布时间】：2011-07-18 05:48:16
【问题描述】：

我正在尝试选择某个类的表的偶数行。

所以表格看起来像这样：

绝对行 1 -- a 类的虚拟行 1 绝对行 2 -- a 类的虚拟行 2（应由 css 选择器匹配）绝对行 3 -- b 类的虚拟 *row 1* 绝对第 4 行——a 类的虚拟第 3 行绝对第5行——a类的虚拟第4行（应该由css选择器匹配）

我尝试使用这个选择器：

.table-result tbody tr.include:nth-child(even) {background-color: #eeeeee;}

但它仍然让 tr 考虑到不同的类

有没有办法解决这个问题？不必求助于表中的表？

HTML：

    <table class="ui-widget ui-widget-content table-result" id="adspaceresult">
        <thead>
            <tr class="ui-widget-header">
                <th>Type</th>

                <th>Info</th>

                <th>Average</th>

                <th>Bid</th>

                <th>Graph</th>
            </tr>

        </thead>

        <tbody id="adrbody">
            <tr class="include">
                <td><button data-adtype="1" data-adspaceid="2" class="resultbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Micro Bar<br>
                88x31</span></button></td>

                <td></td>

                <td>77</td>

                <td>Bid</td>

                <td>Graph</td>
            </tr>

            <tr>
                <td colspan="5">Why hello there!</td>
            </tr>

            <tr class="include">
                <td><button data-adtype="1" data-adspaceid="3" class="resultbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Micro Bar<br>
                88x31</span></button></td>

                <td></td>

                <td>748102</td>

                <td>Bid</td>

                <td>Graph</td>
            </tr>

            <tr class="include">
                <td><button data-adtype="1" data-adspaceid="5" class="resultbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Micro Bar<br>
                88x31</span></button></td>

                <td></td>

                <td>226</td>

                <td>Bid</td>

                <td>Graph</td>
            </tr>

            <tr class="include">
                <td><button data-adtype="1" data-adspaceid="6" class="resultbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Micro Bar<br>
                88x31</span></button></td>

                <td></td>

                <td>6003</td>

                <td>Bid</td>

                <td>Graph</td>
            </tr>
        </tbody>
    </table>

不应计算包含“why hello there”消息的 tr。

【问题讨论】：

child 和 of-type 选择器的行为都是这样的。无论如何，需要查看您的 HTML。
表格是静态的还是动态写出的？如果是后者，你可以访问创建脚本来添加另一个类吗？
好的，添加了html。它是动态的。起初它只包含偶数或不均匀的行，但后来它添加了一行（从用户体验的角度来看）实际上属于顶行。

标签： css css-selectors

【解决方案1】：

按类名选择行并选择备用元素

var list = $(".include")
for (i=0;i<list.length-1;i++)
 {
 if (i%2 == 0){
  // do what you want
 }
}

【讨论】：

很确定所有这些都可以压缩到一个 jQuery 选择器中。
在内部也会这样做

【解决方案2】：

如果行数有限，可以不使用，但我不建议使用它

table .b, table .b~.b~.b, ... {background:white;}
table .b~.b, table .b~.b~.b~.b, ...{background:blue;}

示例http://jsbin.com/exuzex/

【讨论】：