直接改 .invalid-feedback { color: red } 不生效，因需同时满足：父元素含 .form-control.is-invalid 类、表单启用验证（novalidate/was-validated），且须覆盖 .form-control.is-invalid ~ .invalid-feedback 并设 opacity: 1。
改 .invalid-feedback 的颜色没反应，不是 css 写错了，而是你漏掉了触发它的两个前提：父元素必须带 .form-control.is-invalid 类，且整个表单得处于验证激活态（novalidate 或 was-validated）。只调样式不配状态，等于给灯泡通电却不接开关。
为什么直接改 .invalid-feedback { color: red } 不生效
常见现象是文字还是灰的、半透明、甚至完全不出现。根本原因有三个：
-
.invalid-feedback默认被display: none控制，只在紧邻的前一个兄弟元素是.form-control.is-invalid时，才通过.form-control.is-invalid ~ .invalid-feedback规则显示 - 它默认带
opacity: 0.6，单纯改color会被透明度压制，显得发灰 - Bootstrap 5 原始规则 specificity 很高（比如带
[class*="is-invalid"]），单用.invalid-feedback选择器权重不够，压不住
必须同步覆盖的两个 CSS 选择器
只改一个等于白改。你要同时写：
.form-control.is-invalid {
border-color: #d32f2f;
}
.form-control.is-invalid ~ .invalid-feedback {
color: #d32f2f;
opacity: 1;
font-weight: 500;
}
注意：~ 是通用兄弟选择器，要求 <input class="form-control is-invalid"> 和 <div class="invalid-feedback"> 在 DOM 中相邻，中间不能插空格、注释或其它标签。如果用了 <code>form-floating，结构也得保持这种紧邻关系。
JS 层必须手动加类，浏览器不会自动触发
即使 CSS 全对，.is-invalid 类也不会凭空出现。关键动作有：
-
<form></form>标签必须带novalidate属性，否则浏览器原生弹窗会抢在.invalid-feedback之前出现 - 校验失败后，要显式调：
input.classList.add('is-invalid')，不能只靠setCustomValidity('msg')—— 后者只影响checkValidity()返回值，不改 DOM 类 - 若用
was-validated模式，提交时得先form.checkValidity()，再form.classList.add('was-validated') - 每次成功校验后，记得
input.classList.remove('is-invalid', 'is-valid')清旧状态，避免残留
容易被忽略的细节
最常卡住人的点不在 CSS，而在结构和 JS 同步上：
-
.is-invalid必须加在<input>、<select></select>或<textarea></textarea>上，加在包裹div里完全无效 -
.invalid-feedback必须是对应控件的**直接后继兄弟节点**，不能嵌套在<div class="mb-3"> 里，否则 CSS 选择器匹配失败 <li>iOS Safari 下 <code>:invalid伪类响应延迟，纯靠它 +novalidate不够稳，必须用 JS 主动加类才能保证失焦即反馈 - 自定义规则（如“密码需含数字”）必须配合
setCustomValidity('')清空，否则字段会永久卡在 invalid 态，后续输对了也不恢复
