如何为每个.fila类下的首个article元素设置橙色背景？

你的HTML结构中，每个article都是所在div的唯一子元素，所以之前用article:nth-child(odd)会选中所有article——因为它们各自都是父元素的第1个（奇数位）子元素，达不到只选每行左侧文章的效果。

正确实现方案： #

1. 为每行左侧article设置橙色背景
   直接选中.fila下的第一个子容器里的article：

.fila > div:first-child article {
    background-color: rgb(255, 177, 113);
}

这里的>是直接子元素选择器，确保只选中.fila直接嵌套的第一个div里的article，不管这个div是dos_tercios还是un_tercios，都能精准定位每行的左侧文章。

2. 为左右侧article设置不同边距
   有两种实用方案可选：

• 方案一：利用已有的列类名（更直观，适配后续结构调整）

/* 占2/3宽度的列内文章边距 */
.dos_tercios article {
    margin: 0 15px 0 0;
}
/* 占1/3宽度的列内文章边距 */
.un_tercios article {
    margin: 0 0 0 15px;
}

• 方案二：基于左右位置区分

/* 每行左侧文章边距 */
.fila > div:first-child article {
    margin-right: 10px;
}
/* 每行右侧文章边距 */
.fila > div:last-child article {
    margin-left: 10px;
}

完整示例CSS #

/* 左侧文章橙色背景+边距 */
.fila > div:first-child article {
    background-color: rgb(255, 177, 113);
    margin-right: 15px;
}

/* 右侧文章边距 */
.fila > div:last-child article {
    margin-left: 15px;
}

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