小编Bri*_*ian的帖子

将nth-child伪选择器应用于特定的行类

我有一个问题,我不确定它是浏览器还是CSS3.

我有一个使用标准HTML表格的数据网格:

<table>
    <thead>
        ...
    </thead>
    <tbody>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

我有一个jQuery函数正在搜索TD元素的内容.如果找到它,它会维护找到的类.如果找不到,则删除找到的类并添加一个未找到的类.当然,not-found只设置display:none

所以搜索功能正如我所愿.正在正确分配类.但是,我正在使用CSS伪选择器将样式应用于备用行.

tr.found:nth-child(even) {
    background: #fff;
}
tr.found:nth-child(odd) {
    background: #000;
}
Run Code Online (Sandbox Code Playgroud)

这在搜索发生之前效果很好.但是,在搜索并应用了未找到的类之后,伪选择器似乎仅适用于元素而不是元素和类.要么是这样,要么在页面加载期间应用伪选择器,并在该点保持静态.

我可以通过我的jQuery搜索并重新分配特定的偶数和奇数类,但这会变得混乱.它不是那么大的交易,但我的列标题是可排序的,所以我必须重新应用该事件的类,以及创建一种低效的方法来做我正在做的事情.如果数据样本太大,您可能会反复看到类更改,这是我试图避免的.

对此有何解决方案?

编辑

根据要求,我设置了一个JSFiddle,所以天才可以玩它:http://jsfiddle.net/bDePR/

寻找总统或秘书将产生这种行为.

css css-selectors css3

7
推荐指数
1
解决办法
1449
查看次数

标签 统计

css ×1

css-selectors ×1

css3 ×1