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 提出了这个问题的解决方案，但我会添加它只是为了记录以防其他人遇到这个问题。

截至目前，您不能通过类分割 sibling 的部分并使用 :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>

似乎为了激活第 nth-child 伪类，它需要直接访问元素本身而不是它的节点之一。因此，目前主要的解决方法是重构并将您的范围提升一个级别(或更高级别)。