Carousel指示器的CSS类名是.carousel-indicators，其内部圆点由[data-bs-slide-to]按钮元素构成，需通过该选择器覆盖默认样式。
Carousel指示器的CSS类名是什么
bootstrap轮播图的小圆点指示器默认使用 .carousel-indicators 包裹，每个圆点是 <button> 元素，带 .carousel-control-next 那种语义但实际是 .carousel-indicators [data-bs-slide-to] 控制的。关键在于：这些按钮本身没有独立 class，靠父容器和伪元素（如 ::before）生成圆点，所以直接改 button 的宽高、背景色就能生效，但得覆盖 bootstrap 的默认样式优先级。
怎么覆盖默认圆点颜色和大小
Bootstrap 5 默认用 background-color: #fff 和 opacity: .5 渲染未激活圆点，激活态用 opacity: 1。要改样式，必须确保你的 CSS 选择器权重 ≥ Bootstrap 的，推荐写法：
.carousel-indicators [data-bs-slide-to] {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #6c757d;
opacity: 0.7;
}
.carousel-indicators .active {
background-color: #0d6efd;
opacity: 1;
}
- 不要只改
.carousel-indicators button，因为 Bootstrap 5 用[data-bs-slide-to]属性选择器，更精确 - 务必加
border-radius: 50%，否则宽高设了也不圆 - 如果用了 Sass，可在自定义变量里改
$carousel-indicator-width等，但需重新编译
为什么加了CSS没生效
常见原因不是写错了，而是加载顺序或作用域问题：
- CSS 文件在 Bootstrap 样式表 之前 引入 → 浏览器按后加载优先，你的规则被覆盖
- 用了
!important但写在了错误位置，比如只加在background-color上，而opacity还是被 Bootstrap 控制 - 在组件 scoped style 里（如 Vue SFC），没加
:deep(.carousel-indicators)穿透，导致样式未应用到子组件节点 - 检查浏览器开发者工具，看是否真命中了
[data-bs-slide-to]元素，有些老项目可能还混着 Bootstrap 4 的data-slide-to（少个bs-）
想让圆点带边框或阴影怎么办
直接加 box-shadow 和 border 是最简方式，但要注意两点：
- 圆点是
inline-block布局，默认有空白间隙，多个圆点横向排列时，box-shadow可能重叠，建议统一用display: inline-flex或给父容器设font-size: 0消除间隙 - 加
border后总尺寸会变，记得同步调width/height，例如border: 2px solid #fff就要预留空间，不然圆点会撑大 - 如果要做「外发光」效果，
box-shadow: 0 0 6px rgba(13,110,237,.5)比纯边框更柔和
复杂点在于响应式——Bootstrap 默认没为指示器做断点适配，如果你在移动端把圆点缩得太小（比如 8px），用户根本点不准，这时候得配合 @media (max-width: 768px) 单独调大一点。
