我有一张表,其中有一行使用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],则不能仅选择一个)有关,例)。
:nth-child()
:nth- child()
tr
td[rowspan]
jQuery确实具有:has()CSS缺少的选择器,您可以将其与CSS结合使用:even(不是:odd因为0索引和:nth- child()1索引),所以可以与CSS一起使用:
:has()
:even
:odd
$('tr:not(:has(td[rowspan])):even')