要使 .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 之后加载：
.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 下是否放弃了伪类依赖——这些细节一旦漏掉，整套样式就断在第一步。
