Css 成对选择第n个子项（重复模式）？

我正在尝试构建一个网格，该网格具有

div

s，其

width

遵循特定的模式。在网格中，前3个div的

宽度应为
33.333%
，下2个div的
宽度应为
50%
，下3个div的
宽度应为33.3333%
，接下来的2个div的
宽度应为50%
，依此类推（无限）

CSS3
第n个child
似乎很适合这样做，但无论我做什么，它都会在编号时出错，因为我必须使用
：第n个child
两次。这必须以巧妙的CSS方式解决？是否有一种方法可以基于此模式分配
宽度
，而无需手动为每个
div
逐个设置
宽度
，似乎每5个元素中，前3个元素的宽度为33.33%，后两个元素的宽度为50%

因此，您应该将第n个子项
n
与乘法器一起用作
5n
。每组五个元素中的前三个元素是
5n-4
，
5n-3
，
5n-2
，而接下来的两个元素是
5n-1
和
5n
。在
n个子项
选择器中使用这些选项（如下面的代码片段中所示）将实现您所寻找的目标


div{
浮动：左；
高度：50px；
边框：1px实心；
}
分区：第n个孩子（5n-4），
分区：第n个孩子（5n-3），
分区：第n个孩子（5n-2）{
宽度：33.33%；
}
分区：第n个孩子（5n-1），
分区：第n个孩子（5n）{
宽度：50%；
}
* {
框大小：边框框；
}
根据您的问题判断，似乎每5个元素中，前3个元素的宽度为33.33%，后两个元素的宽度为50%

因此，您应该将第n个子项
n
与乘法器一起用作
5n
。每组五个元素中的前三个元素是
5n-4
，
5n-3
，
5n-2
，而接下来的两个元素是
5n-1
和
5n
。在
n个子项
选择器中使用这些选项（如下面的代码片段中所示）将实现您所寻找的目标


div{
浮动：左；
高度：50px；
边框：1px实心；
}
分区：第n个孩子（5n-4），
分区：第n个孩子（5n-3），
分区：第n个孩子（5n-2）{
宽度：33.33%；
}
分区：第n个孩子（5n-1），
分区：第n个孩子（5n）{
宽度：50%；
}
* {
框大小：边框框；
}

请与usSorry分享一些代码，但理论问题无法帮助您获得答案。张贴你的代码并更好地解释它。谢谢这个问题措辞含糊（可能是因为语言障碍），但肯定不是太宽泛。OP试图做什么，起点和终点的定义似乎相当清楚。我觉得这是一个好问题，而不是一个坏问题。尽管显示努力的代码是受欢迎的，但它不是强制性的，提供的任何额外代码都可能导致XY问题。这其实是一个好问题。在Op中添加多余的三行代码是没有意义的，这在问题中已经解释过了。我不同意Harry的观点。关于为什么现有代码不起作用的问题必须在问题中包含该代码。注：出于这个原因，我把票投得离题，而不是太宽泛。除了缺少非工作代码段的关键元素之外，这个问题很好。请与usSorry共享一些代码，但理论问题无法帮助您获得答案。张贴你的代码并更好地解释它。谢谢这个问题措辞含糊（可能是因为语言障碍），但肯定不是太宽泛。OP试图做什么，起点和终点的定义似乎相当清楚。我觉得这是一个好问题，而不是一个坏问题。尽管显示努力的代码是受欢迎的，但它不是强制性的，提供的任何额外代码都可能导致XY问题。这其实是一个好问题。在Op中添加多余的三行代码是没有意义的，这在问题中已经解释过了。我不同意Harry的观点。关于为什么现有代码不起作用的问题必须在问题中包含该代码。注：出于这个原因，我把票投得离题，而不是太宽泛。除了缺少非工作代码段的关键元素之外，这个问题很好。事实上，这可以通过保持默认宽度，然后使用
5n
和
5n-1
来标记更改来稍微简化--@Abhitalks:yes，非常好：）我会保留我的主要答案，因为从理解的角度来看，它更清晰。话虽如此，我想在答案中加入你的解决方案。你介意吗？事实上，这可以简化一点，保持默认宽度，然后使用
5n
和
5n-1
标记更改--@Abhitalks:是的，非常好：）我会保留我的主要答案，因为从理解角度来看，它更清晰。话虽如此，我想在答案中加入你的解决方案。你介意吗？