html - css3 セレクターを使用した N レベルのゼブラ ストライピング?

Question

の .less ファイルには、基本的なゼブラ ストライプ パターンが含まれています.list-striped。

ネストされたリストでも機能します。別名、セレクターを逆にします。そうしないと、親リスト項目と、反対ではなく同じスタイルを持つ子の最初のリスト項目になります。

これは問題なく動作していますが、N レベルの深さを持ちたいと考えているため、ユーザーがネストすると思われる以上のものにスタイルをネストし続けたくはありません。これを整理して、2 レベルのリストだけでなく、N レベルのリストでも機能するようにしますか?

nth-child(even)/nth-child(odd)ネストされたに魔法が必要だと思い.list-itemますか？

• C1
  • C2
    • C1
    • C2
  • C1
    • C2
  • C2
• C2
• C1
• C2

htmlは基本的に

<div class="list-striped">
    <div class="list-item">
        <a class="title">List title</a>

        <!-- Start N-Level Nesting -->
        <div class="list-striped">
            <div class="list-item">
                <a class="title">List title</a>
                <!-- We could duplicate the n-level nesting item here as 
                     much as we want -->
            </div>
        </div>
        <!-- End N-level Nesting -->

    </div>

    <div class="list-item">
        <a class="title">List title</a>

        <!-- Start N-Level Nesting -->
        <div class="list-striped">
            <div class="list-item">
                <a class="title">List title</a>
                <!-- We could duplicate the n-level nesting item here as 
                     much as we want -->
            </div>
        </div>
        <!-- End N-level Nesting -->

    </div>
</div>

そしてcss

div {
  .list-striped {

    .list-item:nth-child(odd) {

      a {
        background-color: @tableBackgroundAccent;
      }

      .list-striped {

        .list-item:nth-child(odd) a {
          background-color: @white;
        }

        .list-item:nth-child(even) a {
          background-color: @tableBackgroundAccent;
        }
      }

    }

    .list-item:nth-child(even) {

      a {
        background-color: @white;
      }

      .list-striped {

        .list-item:nth-child(even) a {
          background-color: @white;
        }

        .list-item:nth-child(odd) a {
          background-color: @tableBackgroundAccent;
        }
      }

    }

  }

  &.list-hover {
    .list-item:hover a {
      background-color: @tableBackgroundHover;
    }
  }
}