如何在Bootstrap项目中用CSS统一表单错误提示样式？

要使 .invalid-feedback 正常显示并生效，必须同时满足：DOM 结构紧邻、类名 is-invalid 正确添加、表单启用 novalidate 且触发 was-validated；仅改 CSS 颜色无效。

直接改 .invalid-feedback 颜色无效，不是 CSS 写错，而是样式根本没被激活——缺了 DOM 结构、类名控制和表单验证开关三样东西。

为什么 .invalid-feedback 改了颜色还是灰的、不显示？

常见现象：写了 .invalid-feedback { color: #d32f2f; }，但文字仍是半透明灰色，甚至完全不出现。原因有三个：

1. .invalid-feedback 默认 display: none，只在它前一个兄弟元素是 .form-control.is-invalid 时，才靠 .form-control.is-invalid ~ .invalid-feedback 规则显示
2. Bootstrap 自带 opacity: 0.6，单纯改 color 会被压暗，看着像没生效
3. 原生规则选择器权重高（比如 [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 缺一不可

样式不会自动触发，必须手动配齐三要素：

1. <form> 标签必须带 novalidate 属性，否则浏览器原生弹窗会抢在 .invalid-feedback 之前出现
2. 校验失败后，必须显式执行 input.classList.add('is-invalid')；只调 setCustomValidity('msg') 不会改 DOM 类
3. 若用 was-validated 模式，提交时得先 form.checkValidity()，再 form.classList.add('was-validated')
4. 每次校验前，先清旧状态：input.classList.remove('is-valid', 'is-invalid')，否则残留类会导致样式错乱

iOS Safari 下必须用 JS 主动同步状态

它对 :invalid 伪类响应非常保守，blur 或 input 后常延迟甚至不响应。纯靠 HTML 属性 + CSS 在 iOS 上大概率失效：

1. 别依赖 required 或 pattern 自动触发 is-invalid
2. 监听 input 或 blur，手动调 checkValidity() 并同步加/删 is-invalid
3. 自定义规则（如“密码需含数字”）必须用 setCustomValidity() + 手动同步类名和 .invalid-feedback 文案

最常卡住人的点不在 CSS，而在结构是否紧邻、novalidate 是否漏加、以及 iOS 下是否放弃了伪类依赖——这些细节一旦漏掉，整套样式就断在第一步。