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

【问题标题】：How to make a zebra list in this situation? with css在这种情况下如何制作斑马名单？与CSS
【发布时间】：2023-01-28 01:28:19
【问题描述】：

我有以下问题，由于组循环使用 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;
}

不工作..

【问题讨论】：

你为什么要一次又一次地使用 tbody 只是在表行的开始和结束时使用它 table tbody tr:nth-child(2n) { background: #ccc;然后试试这个

标签： css angularjs

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：