改 .invalid-feedback 的 color 不生效，是因为它依赖父级 .form-control.is-invalid 触发显示且受 opacity 压制，必须同步覆盖 .form-control.is-invalid 和 .form-control.is-invalid ~ .invalid-feedback 两个选择器，并通过 JS 正确添加 is-invalid 类及 was-validated 类。
直接改 .invalid-feedback 的 color 不生效，是因为它只是文字容器，真正控制显示、颜色、边框和状态的是父级 .form-control.is-invalid 及其样式链。必须同步覆盖两者，且确保类被正确添加。
为什么改了 .invalid-feedback 颜色却没反应
常见错误现象：写了 .invalid-feedback { color: #d32f2f; }，但提示文字仍是灰色、半透明或根本看不见。
-
.invalid-feedback默认由opacity: 0.6和font-size: 0.875em控制，单纯调color会被透明度压制，显得发灰 - 它的
display: none状态只在父元素同时存在.form-control.is-invalid时，才通过.form-control.is-invalid ~ .invalid-feedback规则变为display: block—— 如果父级没加类，它压根不渲染 - Bootstrap 5 的原始规则 specificity 很高（例如带
[class*="is-invalid"]），单用.invalid-feedback选择器权重不够，无法覆盖
必须同步覆盖的两个关键选择器
只改一个等于白改。你得同时写：
-
.form-control.is-invalid：控制输入框红边框、聚焦态、以及是否触发后续反馈 -
.form-control.is-invalid ~ .invalid-feedback：控制下方提示文字的颜色、字体、间距、透明度
示例 CSS（需放在 Bootstrap CSS 之后加载）：
立即学习“前端免费学习笔记（深入）”；
.form-control.is-invalid {
border-color: #d32f2f;
}
.form-control.is-invalid:focus {
border-color: #b71c1c;
box-shadow: 0 0 0 0.25rem rgba(211, 47, 47, 0.25);
}
.form-control.is-invalid ~ .invalid-feedback {
color: #d32f2f;
font-weight: 500;
opacity: 1;
}
注意：~ 是通用兄弟选择器，确保 .invalid-feedback 紧跟在控件之后；若用了 form-floating，结构仍须保持 <input><div class="invalid-feedback"> 相邻。
<h3>容易被忽略的 JS 触发前提</h3>
<p>即使 CSS 写对了，样式也不会自动出现——因为 <code>.is-invalid 类不会由浏览器自动添加。
- 表单必须带
novalidate属性（禁用原生弹窗，否则 Bootstrap 样式不激活） - 提交时要先调
form.checkValidity()，再手动加was-validated类：form.classList.add('was-validated') - 校验失败后，必须显式给对应 input 添加
is-invalid类：input.classList.add('is-invalid') - 验证通过时，别忘了清除：
input.classList.remove('is-invalid')并清空.invalid-feedback.textContent
漏掉任一环节，.invalid-feedback 就只是 HTML 里一段不可见的文本。
最常被跳过的点是：以为改完 CSS 就万事大吉，结果发现 JS 没触发 is-invalid，或者结构上 .invalid-feedback 被包在 form-group 里导致兄弟关系断裂——这时候再猛加 !important 也救不回样式。
