在这种情况下如何制作斑马名单？ 与 css

Question

我有以下问题，使用 Angularjs 和标签，因为组循环，我有这种情况。 如何解决此列表以正确获取斑马？

<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
</tbody>
<tbody>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
    <tr><td>bbbbbbbb</td></tr>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
</tbody>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>   
<tbody>
    <tr><td>bbbbbbbb</td></tr>
    
    <tbody>
    <tr><td>aaaaaaaa</td></tr>
    </tbody>
    <tbody>
    <tr><td>aaaaaaaa</td></tr>
    </tbody>
    <tbody>
    <tr><td>bbbbbbbb</td></tr>
    </tbody>
    <tbody>
    <tr><td>bbbbbbbb</td></tr>
    </tbody>
</table>

table tbody tr:nth-child(4n-1), table tbody tr:nth-child(4n+1)  {
    background: #ccc;
}

不工作..

Answer 1

在每一行的开始和结束时不要一次又一次地使用 tbody。 tbody 表示表体 thead 表示表头，所以一张表只有一个表体。

 table tbody tr:nth-child(2n) { background: #ccc; }

 <table> <tbody> <tr><td>aaaaaaaa</td></tr> <tr><td>aaaaaaaa</td></tr> <tr><td>bbbbbbbb</td></tr> <tr><td>bbbbbbbb</td></tr> <tr><td>aaaaaaaa</td></tr> <tr><td>aaaaaaaa</td></tr> <tr><td>bbbbbbbb</td></tr> <tr><td>bbbbbbbb</td></tr> <tr><td>aaaaaaaa</td></tr> <tr><td>aaaaaaaa</td></tr> <tr><td>bbbbbbbb</td></tr> <tr><td>bbbbbbbb</td></tr> </tbody> </table>

Answer 2

选项1

如果您必须设置 HTML 的样式而不更改 HTML 结构，因为您已粘贴它（如果它是动态加载的并且您无法编辑我假设的结构），如果您可以添加一对行的 JS，然后我会尝试这样的事情：

 var allTheTrs = document.querySelectorAll('tr'); for(var [index,tr] of allTheTrs.entries()){ if(index % 2 == 1){ tr.classList.add('color-me'); } }

 .color-me { background: pink; }

 <table> <tbody> <tr><td>aaaaaaaa</td></tr> <tr><td>aaaaaaaa</td></tr> </tbody> <tbody> <tr><td>bbbbbbbb</td></tr> </tbody> <tr><td>bbbbbbbb</td></tr> <tbody> <tr><td>aaaaaaaa</td></tr> </tbody> <tbody> <tr><td>aaaaaaaa</td></tr> <tr><td>bbbbbbbb</td></tr> </tbody> <tbody> <tr><td>bbbbbbbb</td></tr> <tbody> <tr><td>aaaaaaaa</td></tr> </tbody> <tbody> <tr><td>aaaaaaaa</td></tr> </tbody> <tbody> <tr><td>bbbbbbbb</td></tr> </tbody> <tbody> <tr><td>bbbbbbbb</td></tr> </tbody> </table>

选项 2

但是，如果您可以编辑 HTML，我会将所有<trs>嵌套在一个<tbody>中，如下所示：

<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>  
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
</table>

并使用此 css 规则来定位奇数或偶数孩子：

table tr:nth-child(odd){
   background: pink;
}