我有一个html列表:
项目 1 项目 2 项目 3 项目 4 项目 5 项目 6
我正在尝试仅向元素 3/4、7/8 添加样式......模拟包含两列行的分组。例如:
项目 1 项目 2 项目 3(添加样式( 项目 4(添加样式( 项目 5 项目 6 项目 7(添加样式(
我正在尝试这个:nth-child
但我不确定这是否可能。也许我可以在 JavaScript 中使用 % 循环执行此操作?
试试这个,
var results = [];
var elements = document.getElementsByClassName('para');
for (let i = 2; i < elements.length; i++) {
results.push(elements[i]);
if(elements[i + 1]) results.push(elements[i + 1]);
i += 3;
}
Array.from(results, e => {
e.style.backgroundColor = "gray", e.style.color = 'purple'
});
<p class="para">1</p>
<p class="para">2</p>
<p class="para">3</p>
<p class="para">4</p>
<p class="para">5</p>
<p class="para">6</p>
<p class="para">7</p>
<p class="para">8</p>
<p class="para">9</p>
<p class="para">10</p>
<p class="para">11</p>
<p class="para">12</p>
<p class="para">13</p>
<p class="para">14</p>
<p class="para">15</p>
<p class="para">16</p>
<p class="para">17</p>
<p class="para">18</p>
根据Mayur的评论,使用css也可以做同样的事情,
<style>
p:nth-child(4n-1), p:nth-child(4n) {
color:purple;
background-color: gray;
}
</style>
在你的 CSS 文件中:
li:nth-child(4n-1), nth-child(4n) {
color:red
}
如果 sass 文件:
li
&:nth-child(4n-1), &:nth-child(4n)
color: red
如果 SCSS 文件:
li {
&:nth-child(4n-1), &:nth-child(4n) {
color: red;
}
}
注意:最佳做法是避免使用 javascript 进行 CSS 操作。 如果需要,请根据需要操作要添加/删除的类。 为这些类编写 CSS。