:focus颜色不生效主因是css优先级冲突，需显式设置border-color等属性并避免宽泛选择器；:invalid立即触发可用:user-invalid或js控制；组合状态应写为input:focus:invalid确保样式叠加。
input:focus 时颜色不生效？检查是否被其他样式覆盖
很多情况下写好了 :focus，但点击输入框颜色就是不变，大概率是 CSS 优先级问题。比如全局重置里写了 input { outline: none; }，却没补上 border-color 或 background 的聚焦态样式。
- 确保
:focus规则中显式设置了要变的颜色属性，例如border-color、box-shadow或background - 避免用太宽泛的选择器（如
input）写默认样式，改用带 class 的更具体规则，给:focus留出覆盖空间 - Chrome/Firefox 默认会给
:focus加outline，如果清除了又没补替代视觉反馈，用户会感觉“没聚焦”
input:invalid 总是立刻触发？控制验证时机
:invalid 在 input 渲染后就可能立即匹配——哪怕用户还没输过一个字。比如 required 字段空着，或 type="email" 里填了 "abc"，浏览器会在 load 后直接标为 invalid。
- 加
novalidate到<form></form>可禁用原生校验，自己用 JS 控制:invalid的触发时机 - 更常用的是用
:user-invalid（Chrome 102+、Firefox 119+ 支持），它只在用户交互后（如失焦、提交）才生效，更符合直觉 - 若需兼容老浏览器，可用 JS 动态加 class，比如监听
blur后判断input.validity.valid，再切.is-invalid
focus 和 invalid 同时存在时颜色怎么叠加？
当用户聚焦在一个已无效的输入框上，:focus:invalid 会匹配。但顺序和写法影响最终效果：浏览器按 CSS 规则顺序应用，后写的会覆盖前写的。
- 把组合伪类写在单条规则里，比如
input:focus:invalid { border-color: #d32f2f; }，比分开写:focus和:invalid更可靠 - 别依赖继承——
:focus设了蓝色边框，:invalid设了红色背景，但没写组合态，那聚焦+无效时可能只看到蓝色边框，红色背景被忽略 - 注意
:focus-within不适用于单个input，它对包裹容器有效，别误用
移动端 focus 颜色异常？iOS Safari 的坑
iOS Safari 对 :focus 的触发非常保守：默认只有可编辑元素（如 contenteditable）或明确设了 tabindex 的 input 才能真正获得 focus 状态，软键盘弹出也不一定触发。
- 给
input加tabindex="0"能提高 iOS 下:focus的稳定性 - 部分 iOS 版本会忽略
:focus中的box-shadow，建议优先用border-color做焦点反馈 - 不要只靠伪类做表单校验提示——
:invalid在 iOS 上对某些 type（如number）支持不一致，得配合 JS 的checkValidity()补充逻辑
:focus:invalid 和 :user-invalid:focus 这两个交集状态，结果用户聚焦错误字段时，颜色还是默认的，根本看不出哪里不对。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
