bootstrap 5.3+ 的 carousel 指示器圆点由 [data-bs-target]::before 伪元素渲染，需覆盖该伪元素的 background-color（如 #6c757d）及 width/height/border-radius 才能适配深色背景，未激活态和 .active::before 需分别设置，且 css 必须在 bootstrap 后加载或使用足够权重。
Bootstrap 的 .carousel-indicators 默认使用浅灰（#fff 半透明）圆点，但在深色背景或定制主题下经常看不清——直接覆盖 .carousel-indicators [data-bs-target]::before 的 background-color 就能解决，但要注意 Bootstrap 5.3+ 的伪元素结构变化和 CSS 优先级陷阱。
查清指示器的实际 DOM 结构和类名
Bootstrap 5.3 起，指示器圆点由 [data-bs-target] 元素上的 ::before 伪元素渲染，不是直接设 background-color 在链接上。用浏览器 DevTools 检查会看到类似：
.carousel-indicators [data-bs-target]::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
所以改颜色必须针对这个伪元素，而非 .carousel-indicators button 或 a 标签本身。
覆盖默认样式时必须加 !important 吗？
不一定，但大概率需要——因为 Bootstrap 的原始样式是通过内联 style 属性或高优先级选择器注入的（尤其在 JS 动态初始化后）。稳妥做法是提升选择器权重或加 !important：
- 推荐写法：
.carousel-indicators [data-bs-target]::before { background-color: #0d6efd !important; } - 不加
!important也可行，但需确保你的 CSS 文件在 Bootstrap CSS 之后加载，且选择器足够具体（比如加上.my-carousel .carousel-indicators ...） - 若用 Sass，可在自定义变量中重写
$carousel-indicator-active-bg，但仅影响激活态；非激活态需单独覆盖::before
如何同时修改未激活/激活态颜色和尺寸？
两个状态都靠伪元素控制，区别只在是否带 .active 类：
- 未激活态：
.carousel-indicators [data-bs-target]::before - 激活态：
.carousel-indicators [data-bs-target].active::before - 可统一调大小：
width/height改为8px，border-radius保持50% - 注意：不要只改
.active::before，否则未激活点可能仍为白色，在深背景上消失
示例完整覆盖：
.carousel-indicators [data-bs-target]::before {
background-color: #6c757d;
width: 8px;
height: 8px;
}
.carousel-indicators [data-bs-target].active::before {
background-color: #0d6efd;
}
为什么改了 CSS 还没生效？常见漏点
最常被忽略的是这三点：
- 用了旧版 Bootstrap 类名（如
.carousel-indicators li），但 Bootstrap 5 已移除<li>包裹，直接用<button></button>或<a></a>+data-bs-target - CSS 文件加载顺序错：你的样式必须在
bootstrap.min.css之后引入，否则被覆盖 - 本地开发缓存：浏览器可能缓存了旧 CSS，强制刷新（
Ctrl+Shift+R）或禁用缓存调试
如果轮播图是 JS 动态插入的（比如 Vue/React 组件中），确保样式已全局注册，而不是 scoped 或局部作用域内失效。
