我有一个像这样的CSS表格:
(这是我系统的可靠简化版)
我有一个这样的CSS:
目的是: 当一行被隐藏(使用hide类),表格的样式应该保持不变(每一行在两个可用之间具有不同的颜色)。但实际上,它会被破坏。
根据Firefox的Firebug,:nth-child应用在:not之前,而不是之后(我想要的)。如何解决这个问题?
注意:修改HTML是不可行的。这是使用JavaScript动态生成的内容。
我的目的不是为了计算隐藏的行的nth-child,以便即使该行不可见也能保持样式。
(这是我系统的可靠简化版)
<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;
}
目的是: 当一行被隐藏(使用hide类),表格的样式应该保持不变(每一行在两个可用之间具有不同的颜色)。但实际上,它会被破坏。
根据Firefox的Firebug,:nth-child应用在:not之前,而不是之后(我想要的)。如何解决这个问题?
注意:修改HTML是不可行的。这是使用JavaScript动态生成的内容。
我的目的不是为了计算隐藏的行的nth-child,以便即使该行不可见也能保持样式。