斑马使用CSS3剥离带有隐藏行的表？

一尘不染

斑马使用CSS3剥离带有隐藏行的表？

css

我有桌子

<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;
 }

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

有人通过线索吗？

阅读 298

2020-05-16

共1个答案

一尘不染

距离您将近。请注意，您不能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>&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，因此您只需通过添加tablein来添加额外的代码。

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

现在，[@display=block]将匹配已将属性display设置为block的元素，例如<tr display=block>。显示不是有效的HTML属性；您似乎想做的是使选择器与元素的样式匹配，但是您不能在CSS中做到这一点，因为浏览器需要先从CSS中应用样式，然后才能弄清楚这一点，应用此选择器时，它正在执行过程中。因此，您将无法选择是否显示表格行。由于nth- child只能走 ñ 个孩子无论做什么，不 ñ 日与一些属性，我们将不得不放弃对CSS的这一部分。还有nth-of- type，它选择相同元素类型的第 n 个子元素，但这就是您所能做的。

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

那里有它。

2020-05-16