我有一个像这样的CSS表：
(这是我系统的可靠简化)
<div class="table">
<div class="row">
<div class="data">
abc
</div>
</div>
<div class="row">
<div class="data">
def
</div>
</div>
<div class="row">
<div class="data">
ghi
</div>
</div>
<div class="row">
<div class="data">
jkl
</div>
</div>
</div>
我有一个像这样的CSS：
div.table div.row:not(.hide):nth-child(2n){
background-color: #D7D4DA;
}
div.table div.row:not(.hide):nth-child(2n+1){
background-color: #E4E8EB;
}
.hide{
display:none;
}
目的是：
当隐藏线条时(使用类隐藏),表格的样式应保持不变(每条线条在两个可用的颜色之间具有不同的颜色).相反,它被打破了.
根据firefox的firebug,：nth-child应用于：not,not,not after(如我所愿).怎么解决这个问题？
注意：改变HTML是不行的.这是使用javascript动态制作的东西.
我的目的是不计算第n个孩子隐藏的线条,以便即使线条不可见也能保持样式
解决方法
纯CSS答案(CSS3)
需要考虑一些仔细的考虑因素(见下文),但是there does appear to be a way to do this in pure css(请注意,小提琴使用假帖子表,但是可以使用真正的html表格),使用带有颜色停止的线性渐变(找到的技术) here)在桌子背景.使字体大小更改(或缩放)变得灵活的关键是将background-size的高度部分设置为行设置的行高的两倍.
注意事项：
>行的行高和字体大小应使用em单位显式设置(除了下面的注释#5).
>如果在桌面上设置了填充(不推荐),则可能需要对背景位置或背景剪辑进行某种类型的调整以适应填充.
>如果在行上设置了顶部或底部填充或边距,则它应该以em为单位并在计算加倍的线性渐变高度之前添加到行高值.
>如果该行中有多行(see the last table in my example fiddle),此技术将更改一行中的背景颜色.
>如果行中有一些其他固定高度元素(图像设置为20px高),则可以根据像素值设置行高和线性渐变高度.
我没有花时间玩上面的#2和#3来确定所需的确切调整,但理论上应该可以在必要时容纳这些东西.
