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

Posted 2023-03-06

【中文标题】使用 :nth-child 循环遍历子 LI 元素

【英文标题】：Using :nth-child to loop through children LI elements [duplicate]

【发布时间】：2016-09-20 16:15:13

【问题描述】：

好的，我有一个颜色列表，比如说10。

现在我想遍历这个子元素的颜色列表，并给它们从 1 到 10 的颜色；但是我不知道我会提前生几个孩子，所以我不知道如何处理。

例如，孩子 1 应该有颜色 1，但孩子 11 也应该有颜色 1（因为颜色列表已经重新开始），显然孩子 2 会得到颜色 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 函数之类的东西来执行此操作？

【问题讨论】：

你能添加html结构吗..或者你有问题的当前代码..

@Ninooppgeorge 它可以是任何东西，例如有 21 个孩子的列表 :)

@Brett 请在您的问题中添加一个最小、完整、可验证的示例 (MCVE)。有关这方面的更多信息，请查看help center。

@TylerH 好的。

:nth-child(10n+1)color:1 :nth-child(10n+2)color:2 :nth-child(10n+3)color:3, ...

【参考方案1】：

编辑/扩展答案

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

要从第一个开始，请使用10n+1。这将选择第 1 个、第 11 个、第 21 个等孩子。

如果你写10n+2，这会选择第2个、第12个、第22个、第32个等孩子

因此，您需要 10 条具有不同选择器的规则，从 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>

【讨论】：

你能解释一下它是如何工作的吗？

@Brett 请注意我的扩展答案

非常感谢您的解释！