为什么这个nth-child伪选择器在下表中不起作用？

Question

这是CSS：

#signup .vedit tbody > tr.b_part3:nth-child(2) {
  background: red;
}

HTML结构：

如您所见，我想选择表格的第二个.b_part tr元素。

但由于某种原因，CSS规则尚未应用。

可能是什么问题？

直播网站：http://www.chineselearnonline.com/amember/signup4.php

Answer 1

我知道@Musa已经解决了这个问题的解决方案，但我会补充一点，以防其他人遇到这个问题。

截至目前，你不能通过类来分割兄弟姐妹的部分并使用：nth-​​child（）。

    //Standard Use:
    ul li:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li> <!-- Highlights Two -->
        <li>Three</li>
    </ul>

    // Attempted Use:
    ul li.scope:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li class="scope">One</li>
        <li class="scope">Two</li> <!-- Fails -->
        <li class="scope">Thre</li>
    </ul>

    // Optional Solution:
    ul.scope li:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>

    <ul class="scope">
        <li>One</li>
        <li>Two</li> <!-- Highlights Two -->
        <li>Three</li>
    </ul>

似乎为了激活第n个子伪类，它需要直接访问元素本身而不是其中一个节点。因此，目前主要的工作是重新考虑并将您的范围提高一级（或更高）。

Answer 2

使用:eq()代替:nth-child() https://api.jquery.com/eq-selector/