使用 :nth-child 遍历 children LI 元素

Question

好的，我有一组颜色列表，比方说 10。

现在我想运行遍历 child 个元素的颜色列表，并为它们指定 1-10 的颜色；但是我不知道事先要有多少 children，所以我不确定如何处理。

就像，child 1 应该有颜色 1，但是 child 11 也应该有颜色 1（因为颜色列表已经重新开始），显然 child 2 会得到颜色 2 和 child 12 会得到颜色 2 等等......

示例HTML：

<ul>
    <li>Some Text</li> <!-- Color #1 -->
    <li>Some Text</li> 
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li> <!-- Color #10 -->

    <li>Some Text</li> <!-- Color #1 -->
    <li>Some Text</li>        
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li> <!-- Color #7 -->
</ul>

是否可以使用 :nth-child 或其他函数（例如 Sass 函数）来执行此操作？

Answer 1

编辑/扩展答案

您可以使用 .your_class:nth-child(10n+1)、.your_class:nth-child(10n+2) 等作为 select 或。 “10”是“步长”：例如 3n 是三分之一，所以 10n 是十分之一。默认情况下，计数从零开始，因此 10n 单独适用于第 10、20、30 等。“+1”是偏移量 1。

要从第一开始，请使用 10n+1。这将 select 第 1、11、21 等 child。

如果你写10n+2，这个select就是第2、12、22、32等等child

因此您需要 10 条具有不同 selector 的规则，从 10n+1、10n+2 到 10n+10，其中包含您要应用的不同设置。

这是一个例子：

.container {
  width: 320px;
  height: auto;
  margin: 20px auto;
}
.x {
  float: left;
  width: 60px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.x:nth-child(10n+1) {
  background: #ff0;
}
.x:nth-child(10n+2) {
  background: #af0;
}
.x:nth-child(10n+3) {
  background: #f0a;
}
.x:nth-child(10n+4) {
  background: #b5f;
}
.x:nth-child(10n+5) {
  background: #2f7;
}
.x:nth-child(10n+6) {
  background: #7df;
}
.x:nth-child(10n+7) {
  background: #4ac;
}
.x:nth-child(10n+8) {
  background: #73f;
}
.x:nth-child(10n+9) {
  background: #7cb;
}
.x:nth-child(10n+10) {
  background: #29f;
}

<div class="container">
  <div class="x">1</div>
  <div class="x">2</div>
  <div class="x">3</div>
  <div class="x">4</div>
  <div class="x">5</div>
  <div class="x">6</div>
  <div class="x">7</div>
  <div class="x">8</div>
  <div class="x">9</div>
  <div class="x">10</div>
  <div class="x">11</div>
  <div class="x">12</div>
  <div class="x">13</div>
  <div class="x">14</div>
  <div class="x">15</div>
  <div class="x">16</div>
  <div class="x">17</div>
  <div class="x">18</div>
  <div class="x">19</div>
  <div class="x">20</div>
  <div class="x">21</div>
  <div class="x">22</div>
  <div class="x">23</div>
  <div class="x">24</div>
  <div class="x">25</div>
  <div class="x">26</div>
  <div class="x">27</div>
  <div class="x">28</div>
  <div class="x">29</div>
  <div class="x">30</div>
  <div class="x">31</div>
  <div class="x">32</div>
</div>

使用 :nth-child 遍历 children LI 元素

Using :nth-child to loop through children LI elements

css

children

sass

css-selectors