如何使用nth-child与一个表rowspan的样式？ [英] How to use nth-child for styling with a table with rowspan?

问题描述

我有一个表，其中有一行使用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伪类来添加背景颜色row，但是rowspan是乱七八糟的;它添加背景颜色到rowspan行下面的行，实际上我想它跳过那一行，并移动到下一个。

有没有办法让nth-child做一些聪明的事情，或者在选择器中使用[rowspan]来解决这个问题？所以在这种情况下，我想背景颜色在行1和4，但之后，6,8,10等等（因为没有一个行跨）？这就像我看到一个rowspan，然后我想要nth-child添加1到n，然后继续。

可能没有解决方案，但是我想问： - ）

解决方案<不幸的是，没有办法单独使用：nth-​​child（），或者通过单独使用CSS选择器来做到这一点。这与：nth-​​child（）的性质有关，它完全基于作为其父节点的第n个子节点的元素，以及 CSS缺少父选择器（您不能选择 tr

hr>

jQuery有：has（）选择器CSS缺少，但是可以与<$因为它是0索引与：nth-​​child（）：even '1-index）作为CSS的替代：

  $（'tr：not ：has（td [rowspan]））：even'）
  

jsFiddle预览

I have a table that has one row that uses rowspan. So,

<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>

I'd like to use the nth-child pseudo-class to add a background color to every other row, but the rowspan is messing it up; it adds the background color to the row below the row with the rowspan, when in fact I'd like it to skip that row, and move onto the next.

Is there a way to get nth-child to do something smart, or to use [rowspan] in the selector to get around this? So in this case, I'd like the background color to be on rows 1 and 4 but then after that on 6, 8, 10, and so on (since none of those have rowspans)? It's like if I see a rowspan, then I want nth-child to add 1 to n and then continue.

Probably no solution to this, but thought I'd ask :-)

解决方案

Unfortunately, there's no way to do this with :nth-child() alone, or by using CSS selectors alone for that matter. This has to do with the nature of :nth-child() which selects purely based on an element being the nth child of its parent, as well as with CSS's lack of a parent selector (you can't select a tr only if it doesn't contain a td[rowspan], for example).

---

jQuery does have the :has() selector that CSS lacks, though, which you can use in conjunction with :even (not :odd as it's 0-indexed versus :nth-child()'s 1-index) for filtering as an alternative to CSS:

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

jsFiddle preview

这篇关于如何使用nth-child与一个表rowspan的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！