Question

我们在。{1}}的.less文件中有一个基本的斑马条纹图案。

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

这很好用，但是，我们想要有N级深度，所以我们真的不想只是将样式嵌套到我们认为用户会嵌套的东西之上，我们希望有可以整理一下并使其适用于N级而不仅仅是2级列表的东西吗？

我想我需要在嵌套的.list-striped上使用nth-child(even)/nth-child(odd)魔法？

C1
- C2
  - C1
  - C2
- C1
  - C2
- C2
C2
C1
C2

html基本上是

.list-item

和css

<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>

Answer 1

不是sass中的完全解决方案，但这是一个css解决方案，并且在评论中是一个正在进行中的解决方案。

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;
    }
  }

}

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

和css

1 个答案: