CSS/JS实现：最后一个子元素无disabled类时为nth-last-child(3)设置样式

实现方案 #

你可以通过CSS :has() 伪类实现「最后一个子元素无disabled类时，为倒数第三个子元素设置样式」的需求，修改后的SCSS代码如下：

.VuePagination__pagination {
  // 判断最后一个子元素没有disabled类时，选中倒数第三个子元素
  &:has(.VuePagination__pagination-item:last-child:not(.disabled)) {
    .VuePagination__pagination-item:nth-last-child(3)::before {
      content: '..';
      position: absolute;
      right: 1px;
      top: 7px;
      font-size: 16px;
    }
  }
}

兼容性备选方案 #

如果需要兼容不支持:has()的低版本浏览器，可以用简单的JS逻辑实现：

const paginationList = document.querySelector('.VuePagination__pagination')
const lastItem = paginationList.lastElementChild
if (!lastItem.classList.contains('disabled')) {
  const targetItem = paginationList.querySelector('.VuePagination__pagination-item:nth-last-child(3)')
  targetItem.classList.add('show-ellipsis')
}

再对应添加CSS样式即可：

.VuePagination__pagination-item.show-ellipsis::before {
  content: '..';
  position: absolute;
  right: 1px;
  top: 7px;
  font-size: 16px;
}

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