无法修改React渲染的ul结构，如何为指定相邻li统一添加外边框

解决方案 #

你可以用以下两种纯CSS方案实现效果，完全不需要修改DOM结构：

方案1：伪元素模拟整体外框（兼容性好，最推荐） #

因为你需要加外框的几个li已经通过order:3排列为连续的一组，可以利用ul的伪元素定位到这组li的外围模拟外框：

.ant-pagination {
  position: relative;
  /* 保留你原来的其他样式 */
}
.ant-pagination::before {
  content: '';
  position: absolute;
  /* 调整数值匹配你分页项的内外边距 */
  top: 4px;
  bottom: 4px;
  /* 左侧起始位置可根据第一个order=1的元素宽度+它的margin-left计算，再留一点边距 */
  left: calc(100px + 20px + 4px);
  /* 右侧结束位置可根据order=2的元素的左侧位置减边距，或根据你实际布局调整 */
  right: calc(50% + 120px);
  border: 1px solid #000;
  border-radius: 4px;
  z-index: 0;
}
/* 给目标li设置相对定位和层级，压在伪元素上方 */
.ant-pagination > li:not(:first-child):not(:last-child) {
  position: relative;
  z-index: 1;
  /* 保留你原来的其他样式 */
}

如果你的布局是响应式的，也可以加几行JS动态计算伪元素的位置和宽高：

// 页面加载或分页变化时执行
const pagination = document.querySelector('.ant-pagination')
const targetItems = Array.from(pagination.querySelectorAll('li:not(:first-child):not(:last-child)'))
const firstItem = targetItems[0]
const lastItem = targetItems.at(-1)
// 计算外框位置尺寸
const rect = {
  left: firstItem.offsetLeft - 4,
  top: firstItem.offsetTop - 4,
  width: lastItem.offsetLeft + lastItem.offsetWidth - firstItem.offsetLeft + 8,
  height: firstItem.offsetHeight + 8
}
// 给伪元素设置CSS变量
pagination.style.setProperty('--wrap-left', `${rect.left}px`)
pagination.style.setProperty('--wrap-top', `${rect.top}px`)
pagination.style.setProperty('--wrap-width', `${rect.width}px`)
pagination.style.setProperty('--wrap-height', `${rect.height}px`)

对应CSS改成用变量即可：

.ant-pagination::before {
  left: var(--wrap-left);
  top: var(--wrap-top);
  width: var(--wrap-width);
  height: var(--wrap-height);
  /* 其他样式不变 */
}

方案2：给单个li加单边边框拼接（无需JS，适合固定布局） #

给连续的目标li分别加上对应位置的边框，视觉上拼接成整体外框：

.ant-pagination > li:not(:first-child):not(:last-child) {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  /* 去掉li之间的间距 */
  margin: 0 !important;
}
/* 第一个目标li加左边框和左圆角 */
.ant-pagination > li.ant-pagination-prev {
  border-left: 1px solid #000;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
/* 最后一个目标li加右边框和右圆角 */
.ant-pagination > li.ant-pagination-next {
  border-right: 1px solid #000;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

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