如何为每行前两个article元素设置交替宽度？CSS选择器求助

没问题，我来帮你搞定这个交替宽度的效果！因为你没法修改现有HTML，完全靠CSS的:nth-child()伪类就能实现，关键是找对周期公式。

实现思路 #

我们把每2行（也就是4个article）作为一个循环周期，通过nth-child(4n + x)的公式精准定位元素，实现“宽-窄 → 窄-宽”的交替布局。

完整CSS代码 #

/* 先让容器变成弹性布局，让article自动换行 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 可选，给元素加间距更美观 */
}

/* 给article加基础样式，方便看效果 */
article {
  padding: 1rem;
  background-color: #f0f0f0;
  box-sizing: border-box; /* 确保padding不会撑开元素宽度 */
}

/* 核心的交替宽度规则 */
/* 奇数行的第一个元素（第1、5、9...个article）：设置宽占比 */
article:nth-child(4n + 1) {
  width: 70%;
}

/* 奇数行的第二个元素（第2、6、10...个article）：设置窄占比 */
article:nth-child(4n + 2) {
  width: 25%;
}

/* 偶数行的第一个元素（第3、7、11...个article）：设置窄占比 */
article:nth-child(4n + 3) {
  width: 25%;
}

/* 偶数行的第二个元素（第4、8、12...个article）：设置宽占比 */
article:nth-child(4n + 4) {
  width: 70%;
}

公式说明 #

• 选择器里的4n是循环周期：因为我们需要每4个元素完成一次“宽-窄-窄-宽”的循环，对应两行的交替布局。
• 你可以根据实际需求调整宽度百分比（比如改成60%和35%），只要每行两个元素的宽度总和加上gap不超过容器宽度就行。

内容的提问来源于stack exchange，提问作者ram obrero