要使 .invalid-feedback 正常显示并生效，必须同时满足：DOM 结构紧邻、类名 is-invalid 正确添加、表单启用 novalidate 且触发 was-validated；仅改 CSS 颜色无效。
直接改 .invalid-feedback 颜色无效，不是 CSS 写错，而是样式根本没被激活——缺了 DOM 结构、类名控制和表单验证开关三样东西。
为什么 .invalid-feedback 改了颜色还是灰的、不显示？
常见现象：写了 .invalid-feedback { color: #d32f2f; }，但文字仍是半透明灰色，甚至完全不出现。原因有三个：
- .invalid-feedback 默认 display: none，只在它前一个兄弟元素是 .form-control.is-invalid 时，才靠 .form-control.is-invalid ~ .invalid-feedback 规则显示
- Bootstrap 自带 opacity: 0.6，单纯改 color 会被压暗，看着像没生效
- 原生规则选择器权重高（比如 [class*="is-invalid"]），单用 .invalid-feedback 压不住
必须同步覆盖的两个 CSS 选择器
只改一个等于白改。你要同时写这两段，并确保它们在 Bootstrap CSS 之后加载：
|
1 2 3 4 5 6 7 8 |
.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 中紧邻，中间不能插空格、注释或其它标签。如果用了 form-floating，结构也得保持这种相邻关系（input → label → div.invalid-feedback）。
novalidate、is-invalid 和 was-validated 缺一不可
样式不会自动触发，必须手动配齐三要素：
- <form> 标签必须带 novalidate 属性，否则浏览器原生弹窗会抢在 .invalid-feedback 之前出现
- 校验失败后，必须显式执行 input.classList.add('is-invalid')；只调 setCustomValidity('msg') 不会改 DOM 类
- 若用 was-validated 模式，提交时得先 form.checkValidity()，再 form.classList.add('was-validated')
- 每次校验前，先清旧状态：input.classList.remove('is-valid', 'is-invalid')，否则残留类会导致样式错乱
iOS Safari 下必须用 JS 主动同步状态
它对 :invalid 伪类响应非常保守，blur 或 input 后常延迟甚至不响应。纯靠 HTML 属性 + CSS 在 iOS 上大概率失效：
- 别依赖 required 或 pattern 自动触发 is-invalid
- 监听 input 或 blur，手动调 checkValidity() 并同步加/删 is-invalid
- 自定义规则（如“密码需含数字”）必须用 setCustomValidity() + 手动同步类名和 .invalid-feedback 文案
最常卡住人的点不在 CSS，而在结构是否紧邻、novalidate 是否漏加、以及 iOS 下是否放弃了伪类依赖——这些细节一旦漏掉，整套样式就断在第一步。
