当前位置:  开发笔记 > 编程语言 > 正文

N-child组合跳过2然后选择3

如何解决《N-child组合跳过2然后选择3》经验,为你挑选了2个好方法。

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

1 2 3 4 5 6 7 8 9 10

我在许多参考文献中搜索过:nth Tester,掌握:nth-​​child但是找不到我需要的组合.

我还检查了我的CSS3组合:nth-​​child计算器,它显示了这样的组合:

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

有人可以帮助我实现这个目标吗?



1> web-tiki..:

您可以组合多个nth-child()选择器来实现您的目标:

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;
}


2> Vucko..:

web-tiki回答良好,但是,您可以使用以下方法实现更短的时间:not():

li:not(:nth-child(5n+1)):not(:nth-child(5n+2)){
    background:gold;
    border:1px solid green;
}
推荐阅读
贴进你的心聆听你的世界
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有