Question

我找到了一些使用Javascript来改变颜色的方法，但是我可以隐藏我的table / datagrid中的一些元素，但是使用这个CSS，bg颜色没有正确交替：

CSS

.grid tr:not(.display-none):nth-child(2n+1) > td {
    background: red;
}
.display-none * {
    display: none;
}

HTML

<table class="grid">
    <tr><td>nono1</td></tr>
    <tr><td>nono2</td></tr>
    <tr><td>nono3</td></tr>
    <tr><td>nono4</td></tr>
    <tr class="display-none"><td>nono5</td></tr>
    <tr><td>nono6</td></tr>
    <tr><td>nono7</td></tr>
    <tr><td>nono8</td></tr>
</table>

查看实时样本

http://jsfiddle.net/WBn4U/

Answer 1

所以试试

<table class="grid">
    <tr class="parent"><td>nono1</td></tr>
    <tr class="parent"><td>nono2</td></tr>
    <tr class="parent"><td>nono3</td></tr>
    <tr class="parent"><td>nono4</td></tr>
    <tr class="display-none"><td>nono5</td></tr>
    <tr class="parent"><td>nono6</td></tr>
    <tr class="parent"><td>nono7</td></tr>
    <tr class="parent"><td>nono8</td></tr>
</table>

.parent:nth-child(odd) {
        background-color: #fff;
        }
        .parent:nth-child(even) {
            background-color: red;
        }

        /* after the first non-.parent, toggle colors */
        tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: red;
        }
        tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: #fff;
        }

        /* after the second non-.parent, toggle again */
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: #fff;
        }
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: red;
        }
        .display-none * {
            display: none;
        }

http://jsfiddle.net/vA5Wz/

Answer 2

这是不可能的，因为:nth-child伪类遍历所有子元素。因此，您不能从选择中排除元素 - 即使使用:not也无效。

Selectors Level 3 - 6.6.5. Structural pseudo-classes

在计算父元素子元素列表中元素的位置时，不会计算独立文本和其他非元素节点。在计算父元素子元素列表中元素的位置时，索引编号从1开始。

我的解释是在计算中计算所有元素节点。通过声明不计算文本和其他非元素节点，必须计算所有元素节点，如图所示。

要解决这个问题，我建议只通过JS从文档中删除元素。

为简单起见，这里有一些jQuery：

$('table.grid tr.display-none').remove();

这样，您现在可以使用以下选择器获得所需的结果：

table.grid tr:nth-child(2n+1) > td {
    background: red;
}

jsFiddle example

Answer 3

看看这个例子：

http://jsfiddle.net/KSL7j/1/

使用jQuery

jQuery('tr:visible').filter(':odd').css({'background-color': 'red'});
jQuery('tr:visible').filter(':even').css({'background-color': 'yellow'});

希望有所帮助

CSS表与替代背景颜色与隐藏的元素

3 个答案: