如何利用CSS选择器为类的首尾实例设样式，避免表格展开行边框重叠？

当然可以！针对相邻展开行边框重叠成2px的问题，我们可以通过CSS选择器精准控制边框显示，避免重复。下面是几种实用的方案，都是实际项目里验证过的：

方案一：相邻兄弟选择器（最推荐） #

假设你的展开状态表格行/区块有统一类名，比如.expanded-row，我们可以利用相邻兄弟选择器+移除后一个展开区块的上边框：

/* 给所有展开区块添加基础边框 */
.expanded-row {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 8px; /* 可选：优化内容间距 */
}

/* 移除紧跟在另一个展开区块后的上边框 */
.expanded-row + .expanded-row {
  border-top: none;
}

原理 #

第一个展开区块保留完整的上下边框，后续相邻的展开区块只保留底部边框，这样相邻区块之间只会显示一条边框，完美解决重叠问题。这种方法逻辑清晰，不会影响非相邻的展开区块。

方案二：负margin重叠边框 #

如果布局允许，也可以用负margin让相邻边框重叠，视觉上合并成1px：

.expanded-row {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  /* 让底部边框向上移动1px，与下一个区块的上边框重叠 */
  margin-bottom: -1px;
}

注意点 #

要确保父容器没有设置overflow: hidden（否则可能裁剪边框），同时注意不要影响其他元素的布局间距。

方案三：伪类选择器（适用于同容器内的展开区块） #

如果所有展开区块都在同一个父容器里，可以用:first-child/:last-child只给首尾区块添加对应边框：

.expanded-row {
  border-bottom: 1px solid #ccc;
  padding: 8px;
}

.expanded-row:first-child {
  border-top: 1px solid #ccc;
}

这种方法适合展开区块集中排列的场景，比如同一容器内的多个展开面板。

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