Bootstrap 5 必须用[data-bs-target]选中指示器，.carousel-indicators li完全无效；需同步设置width、height、border-radius（如height:6px对应border-radius:3px），并清除opacity、filter等干扰以确保可见性。
Bootstrap 5 必须用 [data-bs-target] 选中指示器，.carousel-indicators li 完全无效
打开浏览器开发者工具，展开 .carousel-indicators 元素，你会看到里面是一组 <button>，每个都带 data-bs-target 和 data-bs-slide-to 属性——根本没 li。写 .carousel-indicators li 的 CSS，浏览器连匹配都不匹配，自然不生效。
稳妥写法是：.carousel-indicators [data-bs-target]；如果项目要兼容 Bootstrap 4，可改用 .carousel-indicators [data-bs-slide-to]（v4/v5 都支持）；千万别漏掉 .carousel-indicators 前缀，否则 [data-bs-target] 会作用到页面所有带该属性的按钮上。
width、height、border-radius 必须同步改，单点修改大概率失败
只调 width 或只改 border-radius，结果常是边缘发虚、形变糊状、或压根看不出变化。真正起效需要三者协同：
-
width设为20px–30px（太窄手指难点，太宽失去“条感”） -
height设为固定值4px–6px（不能用em/rem，响应式下易错位） -
border-radius显式设为height的一半，比如height: 6px→border-radius: 3px，两端才圆润 - 必须加
background-color和border: none，否则默认透明边框会干扰渲染
激活态要单独处理，靠 width 或 height 扩展比颜色变化更有效
默认的 .active 只改背景色，在长条上反馈太弱。常见且稳定的做法是扩大尺寸：
立即学习“前端免费学习笔记（深入）”；
-
.carousel-indicators [data-bs-target].active { width: 28px; }（比非 active 宽 20%–30%） - 或者改
height：如非 active 是height: 4px，active 改成height: 6px，视觉拉伸更直观 - 别用渐变或
box-shadow做 active 效果——Safari 下有渲染延迟，且在深色背景上容易被遮盖
深色背景上“看不见”长条？大概率是 opacity 或 filter 在捣鬼
改完样式却找不到长条，不是 CSS 没加载，而是隐性样式干扰：
- 某些主题 CSS 给
[data-bs-target]加了opacity: 0.7或filter: grayscale()，让长条像断开的虚线 -
background-color: #ccc在黑色背景上对比度不足，建议提亮到#e0e0e0以上 - 最直接的办法：打开开发者工具 → “Computed” 标签页，逐项检查
opacity、filter、background-color是否被意外覆盖 - 移动端点击区域太小？给
[data-bs-target]加min-width: 24px或padding: 6px扩大热区，别只靠height压扁
真正难调的从来不是形状本身，而是这些藏在 computed styles 里的干扰项。
