使用css3选择器的N-水平斑马条纹？

Question

我们的.less文件中有一个基本的斑马条纹图案.list-striped.

我们甚至让它为嵌套列表工作,也就是说,它会反转选择器,否则你最终得到父列表项,并且子项的第一个列表项具有相同的样式而不是对立面.

这样做很好,但是,我们想要有N级深度,所以我们真的不想只是将样式嵌套到我们认为用户可以嵌套的任何东西上面,我们希望有一些东西可以整理一下,让它适用于N级而不仅仅是2级列表？

我想我需要一些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;
    }
  }
}

Answer 1

不是 sass 中的完整解决方案，但这里是一个 css 解决方案，评论中是针对您的问题的正在进行的 sass 解决方案。

http://codepen.io/sp90/pen/eNOZZz

HTML：

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho
        <ul>
            <li>foo</li>
            <li>foo</li> 
            <li>foo</li>
            <li>foo</li>            
        </ul>
    </li>
    <li>ho
        <ul>
            <li>foo</li>
            <li>foo</li>    
            <li>foo</li>
            <li>foo</li>        
        </ul>
    </li>
    <li>ho</li>
</ul>

萨斯：

ul {
  > li:nth-child(even) {
    background: red;
    ul li:nth-child(even) {
      background: red;
    }
    ul li:nth-child(odd) {
      background: blue;
    }
  }
  > li:nth-child(odd) {
    background: blue;
    ul li:nth-child(odd) {
      background: red;
    }
    ul li:nth-child(even) {
      background: blue;
    }
  }

}