我想知道这个的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)
有人可以帮助我实现这个目标吗?
您可以组合多个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;
}
web-tiki回答良好,但是,您可以使用以下方法实现更短的时间:not()
:
li:not(:nth-child(5n+1)):not(:nth-child(5n+2)){
background:gold;
border:1px solid green;
}