距离您将近。请注意，您不能
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，因此您只需通过添加
tablein来添加额外的代码。
#mytable tr[@display=block]:nth-child(odd) { background-color: #000; }现在，
[@display=block]将匹配已将属性
display设置为block的元素，例如
<trdisplay=block>。显示不是有效的HTML属性；您似乎想做的是使选择器与元素的样式匹配，但是您不能在CSS中做到这一点，因为浏览器需要先从CSS中应用样式，然后才能弄清楚这一点，应用此选择器时，它正在执行过程中。因此，您将无法选择是否显示表格行。由于
nth-child只能走 ñ 个孩子无论做什么，不 ñ 日与一些属性，我们将不得不放弃对CSS的这一部分。还有
nth-of-type，它选择相同元素类型的第 n 个子元素，但这就是您所能做的。
#mytable tr:nth-child(odd) { background-color: #000; }那里有它。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）