html - 使用 css3 选择器的 N 级斑马条纹？

Question

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

我们甚至可以将它用于嵌套列表，也就是说，它会反转选择器，否则您最终会得到父列表项和子项的第一个列表项具有相同样式而不是相反的样式。

这工作正常，但是，我们希望有 N 级深度，所以我们真的不想继续将样式嵌套到我们认为用户永远嵌套的任何东西之上，我们希望有可以整理一下并使其适用于 N 级列表而不仅仅是 2 级列表的东西？

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

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

}