每行交替的div宽度

Question

所以基本上我有这个标记

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

我如何能够为每行的第一个和第二个div设置替代宽度？

我试过article:nth-child+ diff步进目标替代div,但我找不到合适的步进组合

编辑:我真的无法编辑HTML结构,因为这是一个WordPress插件输出

Answer 1

你需要在这里使用:nth-​​child()选择器......

其实这里的模式是每4个元素之后重演......所以,你需要taregt 4n,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>