好的,我有一个情况,我有一个设置的颜色列表,假设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 函数之类的东西来做到这一点吗?
编辑/扩展答案
您可以使用.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>