html - 每行交替的div宽度

所以基本上我有这个标记

<div class="container">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
</div>

如何为每行的第一个和第二个分区提供可选宽度？
我试着用不同的步法来代替目标，但是我找不到正确的步法组合。
编辑：我真的不能编辑HTML结构，因为这是一个WordPress插件输出

最佳答案

您将需要在此处使用:nth-child()选择器…
实际上，这里的模式在每4个元素之后都在重复自己……所以您需要taregt4n、4n+1、4n+2和4n+3

.container {
  display: flex;
  flex-wrap: wrap;
}

article {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border: 5px solid #fff;
  background: gray;
  box-sizing: border-box;
  color: #fff;
  font: bold 20px Verdana;
}

article:nth-child(4n),
article:nth-child(4n+1) {
  width: 25%
}

article:nth-child(4n+2),
article:nth-child(4n+3) {
  width: 75%
}

<div class="container">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  <article>11</article>
  <article>12</article>
</div>