使用 css3 选择器的 N 级斑马条纹？答案

【问题标题】：N- level zebra striping using css3 selectors?使用 css3 选择器的 N 级斑马条纹？
【发布时间】：2013-02-08 06:39:41
【问题描述】：

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

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

这工作得很好，但是，我们想要 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;
    }
  }
}

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/9867471/…
不是我想要的，但是我会添加一个我想要的列表。
虽然我确实从那个答案中得到，如果没有 javascript 或深度嵌套，这将是不可能的。
不可能（没有 JavaScript）。甚至当您创建深度嵌套的 CSS 规则来覆盖嵌套列表时也不会。交替父项取决于前项有多少子项（或者是否有子项）。您无法使用 CSS 确定这一点。我会用 JavaScript 遍历所有 .list-item 并给它们一个额外的类。

标签： html css recursion zebra-striping

【解决方案1】：

在 sass 中不是一个完全完成的解决方案，但这是一个 css 解决方案，在 cmets 中是针对您的问题的一个正在进行的 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;
    }
  }

}

【讨论】：