如何为article内非最后一个div设置border-bottom？适配动态数量

这个需求其实用纯CSS就能完美解决，不用折腾JS，给你几个靠谱的方案：

方案一：:not(:last-child) 伪类（最直观） #

直接选中article下不是最后一个的div，给它们添加border-bottom，不管div的数量是多少，都会自动适配：

article div:not(:last-child) {
  border-bottom: 1px solid #ccc; /* 你可以自定义边框样式、颜色 */
}

原理很简单：:not(:last-child)会排除掉父元素里的最后一个子元素，所以1个div时不会生效，2个div时只有第一个被选中，3个div时前两个被选中，完全符合你的要求。

方案二：相邻兄弟选择器+（另一种思路） #

如果觉得直接加底部边框有适配问题，也可以反过来给后面的div加顶部边框，视觉效果和前面的div加底部边框几乎一致：

article div + div {
  border-top: 1px solid #ccc;
}

这种方式的好处是：不会出现最后一个div意外带边框的情况，而且如果div之间有margin，边框的位置也会更自然。

备选：JS方案（仅特殊场景使用） #

如果你的项目需要兼容非常老旧的浏览器（比如IE8及以下，现在基本很少见了），可以用JS来实现：

// 获取article下的所有div
const divElements = document.querySelectorAll('article div');

// 遍历除了最后一个之外的所有div，添加边框
divElements.forEach((div, index) => {
  if (index !== divElements.length - 1) {
    // 直接设置样式，或者添加预定义的CSS类
    div.style.borderBottom = '1px solid #ccc';
    // div.classList.add('div-border-bottom');
  }
});

总结 #

优先用纯CSS方案，代码简洁、性能好，完全不需要依赖脚本就能实现动态适配。

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