必须同时设置 .form-control.is-invalid 及其子元素 .invalid-feedback 的样式，否则仅改后者颜色无效；.is-invalid 类需由 JS 或手动添加才能触发反馈显示与颜色生效。
直接改 .invalid-feedback 的 color 不够，它只是文字容器；真正决定“提示是否显示”和“颜色是否生效”的，是父级 .form-control.is-invalid 的状态与关联样式链。
为什么 .invalid-feedback 颜色改了但没反应
常见错误现象：写了 .invalid-feedback { color: #e53e3e; }，但输入错误后文字还是灰色或看不见。
- 根本原因是
.invalid-feedback默认被display: none控制，只在父元素有.is-invalid时才通过.is-invalid ~ .invalid-feedback显示——你改的只是显示后的颜色，但若父级没正确触发.is-invalid，它压根不出现 - Bootstrap 5 的
.invalid-feedback默认用opacity: 0.6+font-size: 0.875em，单纯调color可能被透明度压制，显得发灰 - 如果表单没加
.was-validated或没手动添加.is-invalid类，JS 校验逻辑不会激活这套反馈机制
.form-control.is-invalid 必须同步调整
.invalid-feedback 是子元素，它的可见性、间距、甚至颜色继承都依赖父级状态。漏掉这层，等于只修灯泡不接电线。
- 必须确保
.form-control.is-invalid存在且生效：检查 JS 是否调用了setCustomValidity("error")后又忘了reportValidity()，或手动添加类时拼错（比如写成is-invalids） - 改
.form-control.is-invalid的border-color，否则红边框不出现，用户根本注意不到校验失败 - 补上
.form-control.is-invalid:focus的border-color，否则点击后边框变回默认色，反馈中断 - 如果用了自定义图标（如 background-image），记得设
background-image: none，否则图标和文字颜色冲突
覆盖伪类时权重和顺序的关键细节
Bootstrap 的原始规则是 .form-control.is-invalid ~ .invalid-feedback，你的自定义样式必须比它更具体，且加载顺序在 Bootstrap CSS 之后。
- 别用
.invalid-feedback单独选择器，改用.form-control.is-invalid ~ .invalid-feedback或更狠的form .form-control.is-invalid ~ .invalid-feedback - 加
!important很可能不是因为“暴力”，而是因为 Bootstrap 的某些构建版本把这条规则编译成了高 specificity 的内联式写法（比如带[class*="is-invalid"]） - 如果你用 Sass 构建项目，优先在
@import "bootstrap"之后再写覆盖样式，而不是塞进variables.scss里——后者只影响生成逻辑，不干预已存在的 CSS 规则 - 移动端要注意：部分 iOS Safari 对
:focus-within支持不稳定，.invalid-feedback在失焦后可能残留，建议配合transition: opacity 0.15s平滑处理
最容易被忽略的是：表单控件本身（如 input）的 :invalid 伪类并不会自动触发 .is-invalid——这个 class 完全由 JS 或手动添加控制。也就是说，你不能指望浏览器原生校验一报错，.invalid-feedback 就自动变红；得先让 .is-invalid 落到 DOM 上，整个链条才算打通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
