小编典典

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

css

我有一张表,其中有一行使用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,然后继续。

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


阅读 438

收藏
2020-05-16

共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')
2020-05-16