Question

我正在尝试使用css子选择器来定位表中的特定tr。

<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。它或者全部都是，或者都不是。有任何想法吗？谢谢！

Answer 1

您可以使用nth-child()

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

以上将选择所有目标

n的值0,1,2,....将选择1st,5th and 9th tr

Fiddle Demo

有关详细信息，请访问here

Answer 2

我相信你正在寻找n-child

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

Answer 3

假设您只想要那三个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;
}

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

3 个答案: