Css样式为特定数量的孩子

Question

我有一张桌子，我想将css应用于第5个孩子然后第15个孩子的第15个，第20个等等，以便前5行看起来是一个部分然后另外5个行看起来不同的部分。我该怎么做呢我有下面提到的代码。

＆＃13;

＆＃13;

table{
  background:#fff;
  width:100%
}
td{
  padding:5px;
}
table tr:nth-child(5) td{border-bottom:1px solid red}
table tr:nth-child(10) td{border-bottom:1px solid red}

＆＃13;

<table colspan="0" celspacing="0">
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr><tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr><tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
 <tr>
   <td>2232</td>
 </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

在我的本地代码中，行动态来了，我不知道会有多少行，所以我想使用css将css应用于5倍的孩子。请帮忙。

Answer 1

你可以试试这个。乘数是10，因此对于每10个元素，您设置仅5 （最后一个从6到10或从1到5的第一个）。使用此配置，您将使它们与5乘5不同。

＆＃13;

＆＃13;

table {
  background: #fff;
  width: 100%
}

td {
  padding: 5px;
}

table tr:nth-child(10n+6) td,
table tr:nth-child(10n+7) td,
table tr:nth-child(10n+8) td,
table tr:nth-child(10n+9) td,
table tr:nth-child(10n+10) td {
  background: #f2f2f5;
  color: red;
}

＆＃13;

<table colspan="0" celspacing="0">
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
  <tr>
    <td>2232</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你应该能够制定你的css规则

computed