CSS如何移除分期弹窗最后一个列表项的底部边框

现有一个弹窗组件用于展示可选分期付款选项，用户可自主选择任意数量的分期项。当前所有分期项都设置了底部边框，需要实现最后一个分期项不显示底部边框，多次尝试写法均未生效。

原有代码 #

HTML结构 #

<div className="installmentinfo__container only-desktop">
  <div className="installmentinfo">
    <div className="column">
      <div className="installmentnumber" >{(i + 1).toString()}</div>
      <div className="installmentdate">{billDate}</div>
      <div className="installmentamount">{e.amount} {e.currency}</div>
    </div>
  </div>
</div>

注：实际业务中.installmentinfo容器下会循环渲染多个.column分期项节点

原有样式 #

.installmentinfo__container.only-desktop {
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  max-width: 300px;
  box-shadow: 2px 2px 4px 4px #d1d1d1;
  position: absolute;
  background-color: white;
  top: 210px;
  margin: auto;
  transform: translateX(-280px);
  padding: 0.3em;
  z-index: 999;

  .installmentinfo {
    width: 280px;
    height: auto;
    padding: 0em 1em;

    .column {
      display: flex;
      margin: 5px;
      justify-content: space-between;
      font-size: 1.3rem;
      border-bottom: 1.5px solid #d1d1d1;
      padding-bottom: 5px;
    }

    .installmentnumber {
      float: left;
    }

    .installmentdate {
      width: 50%;
      color: black !important;
    }

    .installmentamount {
      width: 50%;
      color: black !important;
      font-weight: 1000;
    }
  }
}

已尝试的无效写法 #

.column:last-child{
  border-bottom: none;
}

.last-child{
  border-bottom: none;
}

&:last-of-type {
  border-bottom: none;
}

1. 选择器权重不足：原有.column的边框样式是嵌套在多层父选择器下的，实际生效权重远高于单独写的.column:last-child，样式被优先级更高的规则覆盖。
2. 伪类书写位置错误：&:last-of-type如果没有嵌套在.column选择器块内，匹配的是父级元素的同类型最后节点，无法命中最后一个分期项。
3. 额外排查点：如果修正权重后仍不生效，检查渲染后的DOM结构，确认最后一个.column后面没有多余的空节点、注释节点或者其他同级元素，会导致:last-child伪类匹配失败。

直接在原有SCSS的.installmentinfo选择器块内，和.column同层级添加对应伪类规则，保证选择器权重一致即可：

.installmentinfo__container.only-desktop {
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  max-width: 300px;
  box-shadow: 2px 2px 4px 4px #d1d1d1;
  position: absolute;
  background-color: white;
  top: 210px;
  margin: auto;
  transform: translateX(-280px);
  padding: 0.3em;
  z-index: 999;

  .installmentinfo {
    width: 280px;
    height: auto;
    padding: 0em 1em;

    .column {
      display: flex;
      margin: 5px;
      justify-content: space-between;
      font-size: 1.3rem;
      border-bottom: 1.5px solid #d1d1d1;
      padding-bottom: 5px;
    }
    /* 新增以下规则 */
    .column:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .installmentnumber {
      float: left;
    }

    .installmentdate {
      width: 50%;
      color: black !important;
    }

    .installmentamount {
      width: 50%;
      color: black !important;
      font-weight: 1000;
    }
  }
}

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