CSS :not(:last-child)选择器失效 最后一个元素仍显示下边框

:last-child 伪类的匹配逻辑是：选中的元素必须是其父元素的最后一个直接子元素，匹配判定和元素的class、标签类型无关，只看节点在父容器子节点列表中的位置。

手风琴组件的常规DOM结构为「触发按钮 + 内容面板」成对排列，即每个.accordion按钮后都跟随一个内容面板div。这种结构下，最后一个.accordion按钮之后还存在最后一个内容面板节点，它本身并不是父容器的最后一个子元素，因此不会被:last-child命中。最终所有.accordion按钮都会匹配.accordion:not(:last-child)规则，全部被加上下边框。

你贴出的纯按钮示例代码本身逻辑是成立的，运行时最后一个按钮不会显示下边框，样式失效是实际运行环境中按钮后存在其他兄弟节点导致的。

• 方案1：使用:last-of-type替换:last-child
  如果所有手风琴触发按钮均为<button>标签，内容面板为其他标签（如<div>），直接替换伪类即可生效。:last-of-type会匹配父容器下同标签类型的最后一个元素，不会被后续不同类型的内容面板影响：

.accordion:not(:last-of-type) {
  border-bottom: 1px solid black;
}

• 方案2：单独控制最后一个按钮的边框（兼容性最优）
  如果触发按钮不一定是统一标签类型，可以先给所有按钮加下边框，再单独清除最后一个按钮的下边框，逻辑更直观，不受其他兄弟节点结构影响：

.accordion {
  background-color: #eee !important;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  /* 所有按钮默认加下边框 */
  border-bottom: 1px solid black;
}

/* 清除最后一个按钮的下边框 */
.accordion:last-of-type {
  border-bottom: none;
}

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