用第n个孩子CSS组织3-2模式

时间:2018-01-17 11:37:18

标签: css css3 css-selectors

我正在尝试使用nth-child伪选择器获得三个元素,两个元素,三个元素的模式。这是我所拥有的: https://codepen.io/juanor/pen/yooeNV

li.hex:nth-child(3n+1){
    clear: left;
}
li.hex:nth-child(6n+4){
    clear: left;
    margin-left: 83px;
}

我不知道这是一个真实的模式还是我应该直接选择我需要清除的所有项目(1,4,6,9,11,14 ......)。到目前为止,我知道我必须选择所有5-1元素但不确定如何轻松完成。也许计算?不确定。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

如果我理解正确,那么这将产生你想要的所需的3,2模式

li.hex:nth-child(5n+4),li.hex:nth-child(5n+6){
    clear: left;
}
li.hex:nth-child(5n+4){
    clear: left;
margin-left: 83px;
}