css - 成对选择第 n 个 child (重复模式)？

Question

我正在尝试构建一个具有 div 的网格，其 width 遵循特定模式。在网格中，前 3 个 div 的 width 应为 33.333%，接下来的 2 个 width 应为 50%，下一个 3 又是 width: 33.3333%，然后是下一个 2 width: 50% 等等(无限)。

CSS3 nth-child 似乎很适合这个，但无论我做什么，它都会像编号一样搞砸，因为我不得不使用 :nth-child 两次。这必须以巧妙的 CSS 方式解决吗？有没有一种方法可以根据这种模式分配 width，而不必为每个单独的 div 一个一个地手动设置 width？

Answer 1

从您的问题来看，似乎在每 5 个元素中，您需要前 3 个元素的 width 为 33.33%，接下来的两个元素的 width 为 50 %.

因此，您应该使用乘数为 5n 的 nth-child。每五个一组中的前三个元素将是 5n-4、5n-3、5n-2，而接下来的两个将是5n-1 和 5n。在 nth-child 选择器中使用这些，如下面的代码片段将实现您正在寻找的内容。

div {
  float: left;
  height: 50px;
  border: 1px solid;
}
div:nth-child(5n-4),
div:nth-child(5n-3),
div:nth-child(5n-2) {
  width: 33.33%;
}
div:nth-child(5n-1),
div:nth-child(5n) {
  width: 50%;
}
* {
  box-sizing: border-box;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

正如 Abhitalks in comments 指出的那样，这可以通过将 width 之一设置为所有 div 元素的默认值然后覆盖它来进一步简化。例如，我们可以将 width: 33.33% 设置为所有 div 元素的默认值，然后仅将 覆盖为 width: 50% >5n 和 5n-1 单独。

div {
  float: left;
  height: 50px;
  width: 33.33%;
  border: 1px solid;
}
div:nth-child(5n-1),
div:nth-child(5n) {
  width: 50%;
}
* {
  box-sizing: border-box;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>