Nth-child 组合跳过 2 然后选择 3答案

【问题标题】：Nth-child Combination to Skip 2 and then Select 3Nth-child 组合跳过 2 然后选择 3
【发布时间】：2021-12-29 18:50:29
【问题描述】：

我想知道这个nth-child() 的值：

1 2 3 4 5 6 7 8 9 10

我搜索了许多参考资料，例如 :nth Tester、Mastering the :nth-child，但找不到我需要的组合。

我还检查了我在这个CSS3 :nth-child Calculator 上的组合，它显示的组合是这样的：

:nth-child(n+3):nth-child(-n+5):nth-child(n+8):nth-child(-n+10):nth-child(n+13)

谁能帮我实现这个目标？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

你可以组合几个nth-child() selectors来达到你的目的：

li:nth-child(5n+3), /* Will select 3, 8, 13, 18...  */
li:nth-child(5n+4), /* Will select 4, 9, 14, 19...  */
li:nth-child(5n+5)  /* Will select 5, 10, 15,20...  */
{
  background:gold;
  border:1px solid green;
}

<ol>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>

【讨论】：

【解决方案2】：

web-tiki 回答得很好，但是，您可以使用:not() 来实现它甚至更短：

li:not(:nth-child(5n+1)):not(:nth-child(5n+2)){
    background:gold;
    border:1px solid green;
}

<ol>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>

【讨论】：

嗨，Vucho，感谢您的回答，不是（）支持类似的浏览器兼容性，如第一个答案......？？这段代码兼容所有浏览器吗？？
@SaurabhLP 都是CC3 selectors，所以两个答案都可以在相同的浏览器中工作（在 IE8 及更低版本中不起作用）-caniuse CSS3 selectors
li:not(:nth-child(5n+4)):not(:nth-child(5n+5)){...} 将跳过每第四和第五个元素。

【解决方案3】：

li:not(:nth-child(4n+1)):not(:nth-child(4n+0)){
    background:gold;
    border:1px solid green;
}

<ol>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>

【讨论】：