如何使用nth-child与具有行跨度的表进行样式设置？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一张表，其中有一行使用rowspan。所以，

<table>
 <tr>
  <td>...</td><td>...</td><td>...</td>
 </tr>
 <tr>
  <td rowspan="2">...</td><td>...</td><td>...</td>
 </tr>
 <tr>
              <td>...</td><td>...</td>
 </tr>
 <tr>
  <td>...</td><td>...</td><td>...</td>
 </tr>
</table>

我想使用nth-

child伪类为每隔一行添加背景色，但是rowpan却把它弄乱了。它将背景色添加到具有rowpan的行下方的行中，而实际上我希望它跳过该行，然后移至下一行。

有没有办法让nth-

child做一些聪明的事情，或者在选择器中使用[rowspan]来解决这个问题？因此，在这种情况下，我希望背景色位于第1行和第4行，但之后位于第6行，第8行，第10行，依此类推（因为这些行都没有行跨度）？就像我看到一个行距一样，然后我希望第n个孩子将n加1，然后继续。

可能对此没有解决方案，但以为我会问:-)

回答：

不幸的是，没有办法:nth-child()单独或单独使用CSS选择器来做到这一点。这与:nth-

child()纯粹基于元素作为其父元素的第n个子元素进行选择的性质有关，也与CSS缺少父选择器（tr如果不包含td[rowspan]，则不能仅选择一个）有关，例）。

jQuery确实具有:has()CSS缺少的选择器，您可以将其与CSS结合使用:even（不是:odd因为0索引和:nth-

child()1索引），所以可以与CSS一起使用：

$('tr:not(:has(td[rowspan])):even')

以上是 如何使用nth-child与具有行跨度的表进行样式设置？ 的全部内容， 来源链接： utcz.com/qa/406039.html

回到顶部