css - 次の表で、この n 番目の子の疑似セレクターが機能しないのはなぜですか?

Question

これはCSSです：

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

HTML 構造:

ご覧.b_partのとおり、テーブルの 2 番目の 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>

nth-child 疑似クラスをアクティブにするには、要素のノードではなく、要素自体に直接アクセスする必要があるようです。したがって、今のところ主な回避策は、リファクタリングしてスコープを 1 レベル (またはそれ以上) 上げることです。