使用:nth-child循环遍历子元素LI

Question

使用:nth-child循环遍历子元素LI

csssasscss-selectorschildren

4

好的，我有一个情况，我有一组颜色，比如说10种。

现在我想为子元素运行这个颜色列表，并将它们的颜色从1到10分配给它们；但是我事先不知道会有多少子元素，所以我不确定该如何处理。

例如，第一个子元素应该有颜色1，但第11个子元素也应该有颜色1（因为颜色列表已经重新开始），显然第二个子元素将获得颜色2，第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 函数来实现这个功能？

- Brett

请问您能否添加HTML结构或者提供您目前有问题的代码片段？ - Ninoop p george

@Ninooppgeorge 它可以是任何东西，比如一个包含21个孩子的列表 :) - Brett

@Brett 请在你的问题中添加一个最小化、完整化、可验证的示例（MCVE）。关于此更多信息，请查看[帮助]。 - TylerH

@TylerH 好的，完成了。 - Brett

:nth-child(10n+1){color:1} :nth-child(10n+2){color:2} :nth-child(10n+3){color:3}，... - Oriol

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Johannes · Accepted Answer

编辑/扩展答案

您可以使用.you_class:nth-child(10n+1), .you_class:nth-child(10n+2)等选择器。 "10"是“步长”：例如3n表示每三个，因此10n表示每十个。默认情况下从零开始计数，因此10n单独应用于第10、20、30等。 "+1"是偏移量为1。

要从数字1开始，您可以使用10n+1。这将选择第1、第11、第21等子元素。

如果您编写10n+2，则会选择第二个、第12个、第22个、第32个等子元素。

因此，您需要具有不同选择器的10个规则，从10n+1开始，直到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>