Bootstrap 5 分页点击（鼠标按下）时边框颜色修改问题

你尝试修改分页数字鼠标按下时的浅蓝色粗边框，给a.page-link:active设置border-color: #f00但未生效，大概率是下面几种原因，对应解决方案如下：

• 浏览器默认outline样式干扰
  很多浏览器会给:active、:focus状态的元素默认添加浅蓝色outline（不是border），所以需要同时设置outline属性：

ul.pagination a.page-link:active {
  border-color: #f00;
  /* 替换默认outline样式 */
  outline: 2px solid #f00;
  /* 若不需要outline，直接移除：outline: none; */
}

• 原CSS选择器优先级不足
  如果是使用UI框架（比如Bootstrap）的分页组件，框架自带样式优先级可能更高，需要提升选择器权重：

/* 增加父元素选择器提升权重 */
ul.pagination li a.page-link:active {
  border-color: #f00;
}
/* 应急可使用!important（不推荐频繁使用） */
ul.pagination a.page-link:active {
  border-color: #f00 !important;
}

• 目标元素选择错误
  部分框架的分页:active状态样式绑定在父级li元素上，比如Bootstrap的.page-item.active，这种情况需调整选择器：

ul.pagination .page-item.active .page-link {
  border-color: #f00;
}

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