Ale*_*x C 30 css css-selectors css3
我有一张桌子
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
我正在尝试将表条带设置为使用nth-child选择器,但似乎无法破解它.
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #FFF;
}
我很确定我很接近......似乎无法破解它.
有谁传递线索？
Bri*_*ell 19
这里尽可能接近你.请注意,您不能使nth-child计数仅显示行; nth-child将采用第n个子元素,无论是什么,而不是匹配给定选择器的第n个子元素.如果您希望丢失某些行并且不影响斑马条纹,则必须通过DOM或服务器端将它们从表中完全删除.
<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
</style>
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
以下是我所做的修复:
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
没有必要为id基于选择器指定祖先选择器; 只有一个元素会匹配#table,所以你只需添加额外的代码即可table.
#mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
现在,[@display=block]将匹配具有display设置为块的属性的元素,例如<tr display=block>.显示不是有效的HTML属性; 你似乎要做的是让选择器匹配元素的样式,但是你不能在CSS中做到这一点,因为浏览器需要先应用CSS中的样式才能弄清楚,它正在应用这个选择器的过程中.因此,您将无法选择是否显示表行.由于nth-child只能走ñ个孩子无论做什么,不ñ一些属性日,我们将不得不放弃对CSS的这一部分.还有nth-of-type,它选择相同元素类型的第n个孩子,但这就是你所能做的.
#mytable tr:nth-child(odd) {
background-color: #000;
}
你有它.
如果您使用 JQuery 更改行的可见性，您可以将以下函数应用于表以.odd在适当的地方添加一个类。每次可见行不同时调用它。
function updateStriping(jquerySelector){
$(jquerySelector).each(function(index, row){
$(row).removeClass('odd');
if (index%2==1){ //odd row
$(row).addClass('odd');
}
});
}
而对于 css 只需做
table#tableid tr.visible.odd{
background-color: #EFF3FE;
}