如何使用CSS选中动态尺寸屏幕下每行的第一个元素？

方案1：纯CSS实现（子元素宽度固定场景） #

这种方案适配你提前能通过媒体查询确定不同屏幕宽度下每行展示元素数量的场景，性能最好，无需JS介入。
实现思路：根据不同断点下每行的元素个数，用:nth-child()选择器匹配每行首个元素，公式为[每行个数]n + 1。
示例代码：

/* 容器基础样式 */
.slides {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
  padding: 0;
  list-style: none;
}

/* ≥1200px 每行放4个 */
@media (min-width: 1200px) {
  .slides li {
    width: calc(25% - 12px);
  }
  .slides li:nth-child(4n + 1) {
    /* 自定义样式，示例为去掉左边距、加左侧高亮 */
    margin-left: 0;
    border-left: 4px solid #165DFF;
  }
}

/* 768px-1199px 每行放3个 */
@media (min-width: 768px) and (max-width: 1199px) {
  .slides li {
    width: calc(33.33% - 10px);
  }
  .slides li:nth-child(3n + 1) {
    margin-left: 0;
    border-left: 4px solid #165DFF;
  }
}

/* <768px 每行放2个 */
@media (max-width: 767px) {
  .slides li {
    width: calc(50% - 8px);
  }
  .slides li:nth-child(2n + 1) {
    margin-left: 0;
    border-left: 4px solid #165DFF;
  }
}

方案2：JS实现（子元素宽度不固定/布局灵活场景） #

如果你的元素宽度是动态的，或者没法通过断点确定每行数量，可以用JS实时计算元素位置，给行首元素加自定义类。
实现思路：遍历所有li元素，对比每个元素的纵向偏移量offsetTop，和上一个元素偏移量不同的就是当前行的首元素，添加自定义类标记。
示例代码：

function setRowFirstItemStyle() {
  const items = document.querySelectorAll('.slides li');
  let preItemTop = null;
  // 先清空之前的标记类
  items.forEach(el => el.classList.remove('row-first-item'));
  
  items.forEach(el => {
    const currentTop = el.offsetTop;
    if (currentTop !== preItemTop) {
      el.classList.add('row-first-item');
      preItemTop = currentTop;
    }
  })
}
// 页面加载完成后执行
window.addEventListener('load', setRowFirstItemStyle);
// 窗口尺寸变化时重新计算
window.addEventListener('resize', setRowFirstItemStyle);

之后直接在CSS中给标记类写样式即可：

.slides li.row-first-item {
  /* 你的自定义样式 */
  margin-left: 0;
  background: #f0f7ff;
}

注意：如果有动态添加/删除li元素的场景，操作完成后手动调用一次setRowFirstItemStyle()即可更新标记。

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