我有一张桌子
<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>
我试图设置表条纹使用第n子选择器，但只是不能似乎破解它。
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #FFF;
}
我很确定我靠近…不能似乎破解它。
任何人通过一条线索？
解决方法
这里是你要得到的尽可能接近。注意，你不能让第n个子计数只显示行; 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，所以你只是通过添加表中添加额外的代码。
#mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
现在，[@ display = block]将匹配具有设置为块的属性显示的元素，例如< tr display = block>。显示不是有效的HTML属性;你似乎试图做的是让选择器匹配的元素的风格，但你不能这样做在CSS中，因为浏览器需要应用CSS之前的样式，它可以计算出来，它在它应用这个选择器的过程中。因此，您将无法选择是否显示表行。因为第n个孩子只能取第n个孩子，不管是什么，不是第n个有一些属性，我们将不得不放弃CSS的这一部分。还有nth-of-type，它选择相同元素类型的第n个子元素，但这是你可以做的。
#mytable tr:nth-child(odd) {
background-color: #000;
}
你有它。
