css儿童选择器针对表中的特定元素

我想使用css儿童选择器针对表内的特定tr。css儿童选择器针对表中的特定元素

<table class="v65-productDisplay"> 
     <tbody> 
      <tr><td></td></tr> <--- Target 1 
      <tr><td></td></tr> 
      <tr><td></td></tr> 
      <tr><td></td></tr> 
      <tr><td></td></tr> <--- Target 2 
      <tr><td></td></tr> 
      <tr><td></td></tr> 
      <tr><td></td></tr> 
      <tr><td></td></tr> <--- Target 3 
      <tr><td></td></tr> 
      <tr><td></td></tr> 
      <tr><td></td></tr> 
     </tbody> 
    </table>

这里就是我和孩子选择迄今为止尝试：

table.v65-productDisplay tbody tr:first-child { 
background-color:red; 
} 
table.v65-productDisplay > tbody > tr:first-child { 
background-color:red; 
} 
table.v65-productDisplay tbody+tr { 
background-color:red; 
}

到目前为止，还没有孩子选择我已经试过都能够针对该表中的TR特异性。它可以是全部，也可以不是。有任何想法吗？谢谢！

来源

2014-01-30 Alex Ritter

您可以使用nth-child()

table.v65-productDisplay > tbody > tr:nth-child(4n+1) { 
    background-color:red; 
}

以上将选择所有目标的n

价值将会是0,1,2,....选择1st,5th and 9thtr

Fiddle Demo

欲了解更多详情，请登录here

来源

2014-01-30 16:46:32

（4n + 1）是如何工作的？我以前从来没有见过这种用在第十一个孩子身上的东西。另外，我只是在我的桌子上试过，并且选择了桌子上的所有tr。你可以查看这个：http：//xlevj.jyetp.servertrust.com/default.asp –

@AlexRitter http://jsfiddle.net/pranavcbalan/bX42N/1/ –

感谢您承认我正在试图锁定每一个4 ，并给我一个我甚至不知道存在的解决方案。干杯! –

我相信你正在寻找第n个孩子

http://css-tricks.com/how-nth-child-works/

table tr:nth-child(1), 
table tr:nth-child(5), 
table tr:nth-child(9) 
{ 
    color: #ccc; 
}

来源

2014-01-30 16:43:34 opalenzuela

我试过nth-child，它似乎没有工作。在进一步检查中，：第n个孩子（1）选择表中的所有tr，而第n孩子（5）和第n孩子（9）正确选择一个tr。为什么是这样？你可以查看http://xlevj.jyetp.servertrust.com/default.asp –

@AlexRitter我没有试过你的代码。它会一直在这些位置？ – opalenzuela

假设你只希望这三个tr（如果你有更多的实际HTML）

table.v65-productDisplay tbody tr:nth-child(4n + 1):nth-child(-n + 10) { 
    color: black; 
}

否则，选择每一个第四tr从第一个开始：

table.v65-productDisplay tbody tr:nth-child(4n + 1) { 
    color: black; 
}

来源

2014-01-30 16:48:46 Stigma

css儿童选择器针对表中的特定元素

回答

相关问题