如何通过CSS选择器组合技巧实现高度自定义的进度条样式？-css教程-PHP中文网

直接修改 .progress 高度会出问题，因为 .progress-bar 依赖父容器高度撑开，若未同步设置两者 height 和 line-height，会导致条纹错位、文字偏移、圆角裁切等问题。

如何通过css选择器组合技巧实现高度自定义的进度条样式？

为什么直接改 `.progress` 高度会出问题

Bootstrap 5 的 .progress 容器设了 height: 1rem（约 16px），但内部的 .progress-bar 默认不写死 height，而是靠父容器“撑开”。一旦有全局 CSS 重置、Flex 布局干扰或第三方主题覆盖，.progress-bar 就会塌回默认高度，导致：外层高 24px，里面条还是 16px，上下留白、圆角被裁、颜色发虚、文字贴顶。

`.progress` 和 `.progress-bar` 必须同步设 height

不能只靠继承或“自动适应”，必须显式声明两者的 height 值完全一致：

.progress-lg { height: 24px; }
.progress-lg .progress-bar { height: 24px; }

漏掉外层规则，在响应式切换或嵌套结构里极易失效；只写内层规则，.progress 自身高度没变，.progress-bar 仍可能被裁切。Sass 中可简写为：.progress-lg, .progress-lg .progress-bar { height: 24px; }，但要注意选择器权重是否能压过 Bootstrap 原始样式或 !important 干扰。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

文字居中必须同步调 `line-height`

高度变了，.progress-bar 里显示的百分比文字（如 70%）会偏上甚至被截断——因为默认靠 line-height 居中，而它没跟着变：

.progress-lg .progress-bar { line-height: 24px; }（值必须严格等于 height）
别用 padding-top 或 margin 挤文字，会破坏宽度百分比计算逻辑（width: 75% 是相对于 .progress 宽度的）
如果启用了条纹动画（bg-striped），还要检查 background-size 是否匹配新高度，否则条纹错位

上线前最容易忽略的三个点

内联调试 style="height:24px" 可行，但上线必须抽成 class；有人在 Sass 中重设了 $progress-height 变量，却忘了重新编译 CSS，页面还是旧高度；还有人只改了 .progress 和 .progress-bar 的 height，但漏了 line-height，结果文字始终贴顶——这些细节不处理，视觉就永远不对。