使用 CSS3 对带有隐藏行的表格进行 Zebra 条纹？

我有一张桌子

<table id="mytable">
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</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;
 }

我很确定我已经很接近了……似乎还无法破解它。

有人传递线索吗？

这就是您所能得到的最接近的结果。请注意，您无法使nth-child仅计算显示的行数；nth-child无论如何，都会采用第 n 个子元素，而不是与给定选择器匹配的第 n 个子元素。如果您希望丢失某些行并且不影响斑马条纹，则必须通过 DOM 或在服务器端将它们完全从表中删除。

#mytable tr:nth-child(odd) {
  background-color: #000;
}

#mytable tr:nth-child(even) {
  background-color: #FFF;
}

<table id="mytable">
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
</table>

以下是我所做的修复：

 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

无需为某个对象指定祖先选择器id基于选择器；只有一个元素可以匹配#table，因此您只需添加额外的代码即可table in.

 #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

Now, [@display=block]将匹配具有属性的元素display设置为阻止，例如<tr display=block>。 Display 不是有效的 HTML 属性；你似乎想要做的是让选择器匹配元素的样式，但你不能在 CSS 中做到这一点，因为浏览器需要应用 CSS 中的样式才能弄清楚这一点，这当它应用这个选择器时，它正在执行。因此，您将无法选择是否显示表行。自从nth-child无论如何只能采用第 n 个子级，而不是带有某些属性的第 n 个子级，我们将不得不放弃 CSS 的这一部分。还有nth-of-type，它选择相同元素类型的第 n 个子元素，但这就是您所能做的。

 #mytable tr:nth-child(odd) { 
      background-color:  #000;  
 }

现在你就得到了它。