css – 使用第n个孩子选择一个偶数,然后是奇数个元素

前端之家收集整理的这篇文章主要介绍了css – 使用第n个孩子选择一个偶数,然后是奇数个元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图按照这个特定的顺序对列表项进行样式:

1:白色
2:白色
3:蓝色
4:蓝色
5:蓝色
6:白色
7:白色
8:蓝色
9:蓝色
10:蓝色
11:白
12:白色

模式是[1-2] [3-4-5] [6-7] [8-9-10]

我的html结构只是一个简单的列表:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

这个模式是否可以使用css nth-child?如果是这样我的选择器会是什么样的?

解决方法

相同输出的较短代码将是:
li {
  color: white;
}
li:nth-child(5n-3),li:nth-child(5n-4) {
  color: blue;
}
li {
  color: white;
}
li:nth-child(5n-4),li:nth-child(5n-3) {
  color: blue;
}
/** FOR THE DEMO **/

body {
  background: grey;
}
<ul>
  <li>1. text</li>
  <li>2. text</li>
  <li>3. text</li>
  <li>4. text</li>
  <li>5. text</li>
  <li>6. text</li>
  <li>7. text</li>
  <li>8. text</li>
  <li>9. text</li>
  <li>10. text</li>
  <li>11. text</li>
  <li>12. text</li>
</ul>

要点是您不需要指定白色应用于哪个元素,而只需要蓝色的元素,因为它会覆盖“默认”设置的白色。

猜你在找的CSS相关文章