动态生成Bootstrap折叠面板时首末子元素重合的显示问题

这个坑我之前也踩过！当Accordion只有一个子元素时，它会同时触发:first-of-type和:last-of-type两个伪类，导致你的两个CSS规则叠加后，把圆角和下边框都弄没了。给你两个实用的修复方案：

方案1：用:only-of-type专门处理唯一子元素 #

:only-of-type伪类专门匹配父元素下唯一的该类型子元素，我们可以用它来覆盖冲突的样式：

/* 当.card是Accordion下唯一的子元素时，恢复正常样式 */
.accordion > .card:only-of-type {
  border-radius: 0.25rem; /* 替换成你项目中使用的圆角值 */
  border-bottom: 1px solid #dee2e6; /* 恢复下边框，颜色按需调整 */
}

这个规则的优先级和你原来的两个规则一致，但因为它是更精确的匹配（针对唯一子元素），所以会覆盖冲突的样式，让单个子元素显示正常的圆角和边框。

方案2：用:not()排除重叠情况（更优雅） #

直接修改你原来的选择器，让:first-of-type只在不是最后一个子元素时生效，:last-of-type只在不是第一个子元素时生效：

/* 仅当第一个子元素不是最后一个时，应用底部无边框+无圆角 */
.accordion > .card:first-of-type:not(:last-of-type) {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* 仅当最后一个子元素不是第一个时，应用顶部无圆角 */
.accordion > .card:last-of-type:not(:first-of-type) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

这样当只有一个子元素时，两个:not()条件都不满足，原来的冲突样式都不会生效，元素会保持默认的圆角和边框，从源头上避免了样式冲突。

个人更推荐方案2，因为它不需要额外的覆盖规则，逻辑更清晰，也更符合CSS的设计思路。

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