最常见原因是html未配对：:required仅匹配真实存在required属性的原生表单控件（input/select/textarea），不识别required="false"、自定义组件或div，且需确保dom已更新、旧版safari兼容性及伪元素定位正确。
input:required 选择器为什么没反应
最常见的情况是 HTML 没配对——:required 只匹配真实存在 required 属性的原生表单控件，不是写上 CSS 就自动生效。它不认 required="false"（这会被忽略），也不认 required=""（空字符串照样生效），更不认自定义组件或 div 上的伪类用法。
检查点包括：
- 用 DevTools 看元素是否真有
required属性（不是 JS 动态加了但 DOM 没更新） - 确认标签是
<input>、<select></select>或<textarea></textarea>，type="hidden"或封装过的 React Input 不会匹配 - 旧版 Safari 对
appearance: none+:required组合容易丢边框，加box-sizing: border-box能稳住渲染
怎么让必填项旁边显示红色星号
:required 本身不生成内容，必须靠 ::after 或 ::before 实现星号。直接给 input:required::after 加 content: "*" 会失败——input 是替换元素，伪元素默认不渲染。
稳妥做法是定位到 label：
- 给
label加position: relative - 用
label:has(input:required)::after插入星号（注意 Safari 15.4 以下不支持:has()） - 降级方案：改用
label[for="xxx"]::after或 JS 动态加 class 控制::after - 别忘了设
color: #e53935和font-weight: bold，色弱用户靠颜色不够
为什么边框高亮总被覆盖
input:required 的选择器权重只有 10（和 [required] 相同），远低于 .form-control 这类类名（权重 10），更压不过内联样式（1000）。所以写了 input:required { border: 2px solid red; } 却没变化，大概率是被框架样式盖掉了。
解决方法很实际：
- 提高特异性：写成
form input:required或.my-form input:required - 避免用
!important，只在调试时临时加，上线前换成更具体的选择器 - IE11 不支持
:required，但支持input[required]，生产环境建议统一用后者 - Chrome/Firefox 会在某些类型（如
date）右侧自动加星号，可用input:required::-webkit-calendar-picker-indicator { display: none; }统一接管
:required 和 :invalid 怎么配合用才不误导用户
:required 只表示“这个字段声明为必填”，它不会随用户输入变化；真正反映“还没填”或“填错了”的是 :invalid。单独用 :required 容易让用户以为“标红=出错”，其实只是设计标识。
组合使用更准确：
-
input:required:not(:valid):not(:placeholder-shown)→ 必填且当前为空/格式错（适合红底+感叹图标） -
input:required:valid→ 已填且通过基础校验（适合绿边+对勾） - 首次加载页面时，
:invalid可能不触发，加:placeholder-shown判断能补漏，但得确保所有必填项都有placeholder - 表单重置后，
:required样式还在，但值已清空，视觉和状态不同步——JS 监听reset事件并 toggle class 是唯一可靠解法
真正难处理的不是写法，是 checkbox/radio 的星号定位偏移、IE11 兼容性 fallback、以及 reset 后的状态残留——这些地方不手动干预，光靠 CSS 做不到一致体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
