CSS nth-child 公式答案

【问题标题】：CSS nth-child formulaCSS nth-child 公式
【发布时间】：2021-11-20 01:54:05
【问题描述】：

我有一个包含可变数量列表项的列表。我想用列表中的项目实现某种样式模式：

第 1 项：颜色：绿色
第 2 项：颜色：橙色
第 3 项：颜色：绿色
第 4 项：颜色：橙色
第 5 项：颜色：橙色
第 6 项：颜色：绿色
第 7 项：颜色：橙色
第 8 项：颜色：绿色
第 9 项：颜色：绿色
第 10 项：颜色：橙色
第 11 项：颜色：绿色
第 12 项：颜色：橙色
...
第 99 项：

模式是偶数/奇数，每 4 个项目切换一次。是否有我可以使用的第 n 个子公式来处理任意数量的列表项？

li:nth-child(?) {
  color: green;
}

li:nth-child(?) {
  color: orange;
}

<ul>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
</ul>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

如果公式可以简化到可以通过模（除法后的剩余数字）解释为模式，则可以通过 CSS 实现此效果

本帖中有一些很好的例子here

但是，为将来的项目使其动态化可能会很痛苦，因此我强烈建议您查看 SASS（可能是一个学习的好机会），因为您可以进行更高级的计算并在最后输出到 CSS

Sass examples here

【讨论】：

【解决方案2】：

你的模式每重复 8 个项目，所以：

li:nth-child(8n + 1),
li:nth-child(8n + 3),
li:nth-child(8n + 6),
li:nth-child(8n + 8){
  color: green;
}

li:nth-child(8n + 2),
li:nth-child(8n + 4),
li:nth-child(8n + 5),
li:nth-child(8n + 7){
  color: orange;
}

<ul>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
</ul>

您可以使用一种颜色作为默认颜色进行简化：

li {
  color: green;
}

li:nth-child(8n + 2),
li:nth-child(8n + 4),
li:nth-child(8n + 5),
li:nth-child(8n + 7){
  color: orange;
}

<ul>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
</ul>

【讨论】：