如何移除CSS垂直标签页最后一项的底部边框？

有两种简单的方法可以解决这个问题：

方法一：使用CSS伪类（推荐，通用型） #

直接利用:last-child伪类选中.tabs容器里的最后一个.tab元素，取消它的底部边框。在你的CSS代码末尾添加以下样式：

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

这个方法不需要修改HTML结构，就算以后新增标签项，最后一个的边框也会自动被移除，兼容性和灵活性都很好。

方法二：针对特定ID（精准定位） #

如果你的标签数量固定，也可以直接通过最后一个标签的ID来取消边框，添加这段CSS：

#fourth-tab {
  border-bottom: none;
}

不过这种方法灵活性较差，要是以后新增或删除标签，就得手动修改选择器。

效果验证 #

添加完样式后，最后一个标签的底部1px边框就会消失，和整体界面的清爽风格保持一致。

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