:required仅匹配required属性且不自动添加星号或提示，需手动用::after或html实现；优先级低易被覆盖，ie10+支持但ie不支持input上::after；动态添加属性即时生效，但不可替代服务端校验。
伪类 :required 不会自动加星号或提示文字
浏览器只用它匹配带 required 属性的表单控件，本身不改变文案或布局。想让必填项旁边显示“*”或“必填”，得手动加 ::after 伪元素或额外 HTML。
- 常见错误：以为写了
input:required { color: red; }就够了，结果用户根本看不出哪几个是必填 - 真实场景：登录页的
<input name="username" required>和<input name="email">需视觉区分 - 安全提示：别只靠颜色区分（色弱用户难识别），至少搭配图标或文字
:required 的选择器优先级容易被覆盖
它本质是个属性选择器，权重和 [required] 一样（10），比类名（10）低，更远低于内联样式（1000）。如果用了 UI 框架或重置 CSS，很可能失效。
- 典型现象：加了
input:required { border: 2px solid #f00; }，但边框没变红——检查是否被.form-control的border覆盖 - 解决方法：提高特异性，比如写成
form input:required或加!important（仅限快速验证，不推荐长期用） - 兼容性：IE10+ 支持，但 IE 不支持
::after在<input>上，所以星号方案在 IE 里要 fallback 到 JS 或 HTML 标记
动态添加 required 属性时，:required 会立即生效
JS 修改 element.required = true 或 el.setAttribute('required', '') 后，样式规则立刻匹配，无需重新渲染或事件触发。
- 使用场景：多步骤表单中，第二步的字段只在第一步选了“个人”后才变必填
- 注意点：Vue/React 等框架里，直接改 DOM 属性可能绕过响应式系统，建议用
v-model或useState控制required属性的绑定 - 性能影响：无——这是纯 CSS 匹配，不触发重排重绘
不要用 :required 替代服务端校验
它只是前端视觉辅助手段，用户禁用 JS、绕过 HTML、甚至直接发请求，都能跳过这个约束。
立即学习“前端免费学习笔记（深入）”；
- 错误认知：“加了
:required+required属性，后端就不用再判空了” - 必须同步做：后端对所有标为必填的字段做非空/格式校验，并返回明确错误码
- 容易被忽略的点：某些富文本编辑器或自定义下拉组件，
required属性挂载位置不对（比如挂在容器上而非真实<input>），导致:required完全不生效
