css - 为什么这个 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/