直接改 .invalid-feedback 颜色无效的根本原因是：它默认 display: none，需紧邻 .form-control.is-invalid 才显示；自带 opacity: 0.6 压暗颜色；且 Bootstrap 原生选择器权重高，必须同步覆盖 .form-control.is-invalid 和 .invalid-feedback 样式，并确保 DOM 相邻、novalidate 属性存在、is-invalid 类手动添加。
为什么直接改 .invalid-feedback 颜色没反应
写了 .invalid-feedback { color: red; } 却还是灰字、半透明、甚至不显示，不是 css 写错，而是触发条件没满足。根本原因有三个：
• .invalid-feedback 默认是 display: none，只在它前面紧邻的兄弟元素是 .form-control.is-invalid 时，才靠 .form-control.is-invalid ~ .invalid-feedback 规则显示
• 它自带 opacity: 0.6，单纯改 color 会被压暗，看着像没生效
• bootstrap 5 原生规则选择器权重高（比如 [class*="is-invalid"]），单用 .invalid-feedback 压不住
.form-control.is-invalid 和 .invalid-feedback 必须同步覆盖
只改一个等于白改。你必须同时写这两块 CSS，且放在 Bootstrap CSS 之后加载：
.form-control.is-invalid {
border-color: #d32f2f;
}
.form-control.is-invalid ~ .invalid-feedback {
color: #d32f2f;
opacity: 1;
font-weight: 500;
}
注意：~ 是通用兄弟选择器，要求 DOM 中 <input class="form-control is-invalid"> 和 <div class="invalid-feedback"> 紧挨着，中间不能插空格、注释或其它标签。如果用了 <code>form-floating，结构也得保持这种相邻关系。
novalidate 属性和 is-invalid 类必须手动加
浏览器不会自动给你加 is-invalid 类，也不会因为你写了 required 就让 .invalid-feedback 显出来。关键动作缺一不可：
-
<form></form>标签必须带novalidate属性——否则浏览器原生弹窗会抢在.invalid-feedback之前出现，样式完全不激活 - 校验失败后，必须显式执行：
input.classList.add('is-invalid')；只调setCustomValidity('msg')不会改 DOM 类 - 每次校验前，先清旧状态：
input.classList.remove('is-valid', 'is-invalid')，否则残留类会导致样式错乱 - 如果用
was-validated模式，提交时得先form.checkValidity()，再form.classList.add('was-validated')
iOS Safari 下必须用 JS 主动控制状态
它对 :invalid 伪类触发非常保守，blur 或 input 后常延迟响应甚至不响应。纯靠 HTML 属性 + CSS 在 iOS 上大概率失效：
- 别依赖
required或pattern自动触发is-invalid - 监听
input或blur事件，手动调checkValidity()，再根据结果加/删is-invalid - 自定义规则（如“密码需含数字”）必须用
setCustomValidity()+ 手动同步类名和.invalid-feedback.textContent -
input事件里一定要清空：this.setCustomValidity('')，否则用户改完内容仍卡在错误态
novalidate、is-invalid 的手动添加时机，三者缺一不可。
