如何为CSS列表多列布局的每列最后一项设置不同样式？

这个问题确实挺头疼的——CSS多列布局（column-count）是浏览器自动分配内容到各列的，没法直接用:last-child这类选择器精准选中每列的最后一项。不过有几个实用的方案可以解决，按推荐程度排序：

方法一：用顶部边框模拟底部边框（最推荐，纯CSS） #

放弃给列表项加border-bottom，转而用border-top，同时给容器加一点顶部内边距抵消第一个项的顶部边框。这样每列的最后一项下面没有后续项，自然就不会有“底部边框”的视觉效果：

.list-col-3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 1.5rem;
  -webkit-column-gap: 1.5rem;
  column-gap: 1.5rem;
  padding-top: 1px; /* 抵消第一个列表项的border-top */
}

.list-col-3 li {
  border-top: 1px solid #ccc; /* 用顶部边框替代底部边框 */
  padding: 0.8rem 0;
  break-inside: avoid; /* 避免列表项被拆分到两列，优化视觉体验 */
}

这个方案完全不需要关心列表项的总数，纯CSS实现，兼容性也很好。

方法二：改用CSS Grid布局 #

如果可以替换多列布局为Grid，那就能更精准地控制每列的最后一项。Grid默认是行优先填充，最后N项（N为列数）就是每列的最后一个，直接用nth-last-of-type选择即可：

.list-col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.list-col-3 li {
  border-bottom: 1px solid #ccc;
  padding: 0.8rem 0;
}

/* 选中最后3项，也就是每列的最后一个 */
.list-col-3 li:nth-last-of-type(-n+3) {
  border-bottom: none;
}

注意：Grid的行优先填充和多列布局的列优先填充顺序不同，如果需要完全匹配多列的排列顺序，可以用grid-auto-flow: dense调整，或者根据需求修改填充逻辑。

方法三：JavaScript辅助（兼容多列布局的兜底方案） #

如果必须保留column-count的多列布局，那可以用JS计算每列的项数，给每列最后一项添加类来隐藏边框：

function removeLastColumnBorders() {
  const list = document.querySelector('.list-col-3');
  if (!list) return;
  
  const items = Array.from(list.querySelectorAll('li'));
  const columnCount = parseInt(getComputedStyle(list).columnCount);
  if (columnCount === 0 || items.length === 0) return;
  
  const itemsPerColumn = Math.ceil(items.length / columnCount);
  
  // 先移除之前的类，避免重复添加
  items.forEach(item => item.classList.remove('no-border'));
  
  // 给每列的最后一项加类
  for (let i = itemsPerColumn - 1; i < items.length; i += itemsPerColumn) {
    items[i].classList.add('no-border');
  }
}

// 初始化执行
removeLastColumnBorders();
// 窗口 resize 时重新计算（响应式场景）
window.addEventListener('resize', removeLastColumnBorders);

然后在CSS中添加：

.no-border {
  border-bottom: none !important;
}

这个方案需要处理窗口 resize 的情况，适合必须使用多列布局的场景。

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