如何处理可显示/隐藏元素的边框问题？求纯CSS解决方案

这个问题的核心在于你原来用的:not(:last-child)是基于DOM结构判断的，不是元素的可见状态。哪怕最后一个DOM元素被隐藏了，倒数第二个元素在DOM树里仍然不是:last-child，所以它的底部边框会保留下来，导致视觉上的最后一个元素下方出现多余边框。

不用JavaScript干预，纯CSS就能解决，这里给你两种靠谱的方案：

方案1：相邻兄弟选择器（兼容性好，推荐） #

放弃给非最后一个元素加底部边框的思路，转而给两个可见元素之间添加分隔线。假设你隐藏元素时会给它加一个.hidden类（设置display: none），可以这样写：

/* 只有当前一个可见元素后面跟着另一个可见元素时，给后者加顶部边框 */
.event-type:not(.hidden) + .event-type:not(.hidden) {
  border-top: 1px solid #000;
}

这种方式的好处是完全基于元素的可见状态生成边框，不管哪个元素被隐藏，都只会在相邻的可见元素之间显示分隔线，不会出现多余的底部边框。

如果你的隐藏逻辑是直接给元素设置display: none而没加类，也可以用:not([style*="display: none"])替代:not(.hidden)，但更推荐给隐藏元素加类，样式会更稳定。

方案2：使用:has()伪类（现代浏览器适用） #

如果你的项目不需要兼容旧浏览器（比如Chrome 101+、Firefox 121+），可以结合:has()伪类针对父容器调整样式。首先把这些.event-type元素放到一个父容器里，比如：

<div class="event-container">
  <div class='event-type'>One</div>
  <div class='event-type'>Two</div>
  <div id='test' class='event-type'>Three</div>
</div>

然后写CSS：

/* 保留原来的基础样式 */
.event-type:not(:last-child) {
  border-bottom: 1px solid #000;
}

/* 当父容器里的最后一个DOM元素被隐藏时，移除倒数第二个可见元素的底部边框 */
.event-container:has(.event-type:last-child.hidden) .event-type:not(.hidden):last-child {
  border-bottom: none;
}

这个方案能保留你原来的底部边框逻辑，同时处理最后一个元素被隐藏的特殊情况。

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