CSS required伪类应用_突出显示必填表单项的样式

:required伪类仅对原生支持required属性的表单元素（input/select/textarea）生效；需确保属性透传、选择器正确、避开safari旧版组合伪类bug，并注意css优先级与作用域限制。

required伪类不生效？检查表单控件是否原生支持

:required 只对原生支持 required 属性的表单元素有效，比如 <input>、<select></select>、<textarea></textarea>。自定义组件（如 React 封装的 MyInput）或禁用 required 属性的元素不会触发该伪类。

• <input type="text" required> ✅ 匹配 :required
• <div contenteditable="true" required> ❌ 不匹配，<code>contenteditable 元素不支持 required
• <input type="hidden" required> ❌ 浏览器忽略隐藏输入的 :required 样式（虽属性存在，但伪类不激活）
• Vue/React 中若用 v-model 或 value + onChange 管理状态，但没把 required 属性透传到真实 <input> 上，样式也不会生效

样式写错位置？确保选择器能命中实际渲染的元素

常见错误是把 :required 写在父容器或 label 上，比如 label:required —— 这永远不生效，因为 label 本身没有 required 属性。

• 正确写法：input:required、textarea:required、select:required
• 想连带高亮 label，得用相邻/兄弟选择器：input:required + label（需 label 在 input 后）或 input:required ~ label（更宽松）
• 如果 label 是包裹结构（<label><input required></label>），可用 label input:required，但注意这匹配的是 label 内部的 input，不是 label 自身

浏览器兼容性陷阱：Safari 旧版本不支持 :required 与 :invalid 组合

:required:invalid 这类组合伪类在 Safari ≤ 14.1 中有 bug：即使输入为空，:required:invalid 也不触发。单独用 :required 没问题，但想“只对必填且当前无效的项加红边”，就得绕开。

• Safari 14.1 及更早：优先用 :required 配合 js 监听 input 和 blur，动态加 class（如 is-invalid）
• chrome/firefox/edge 无此问题，input:required:invalid 可直接用
• 不要依赖 :required:valid 做成功态提示——它只在用户输入后才成立，初始空值时既不 :valid 也不 :invalid（处于 indeterminate 状态）

样式被覆盖？:required 的优先级和 specificity 很关键

:required 本身不增加 specificity，它的权重等同于一个类选择器（.class）。如果已有 input { border: 1px solid #999; }，而你写 input:required { border-color: #d32f2f; }，它会被前面的规则覆盖（因为同为 element + pseudo-class，但声明顺序靠后 ≠ 自动更高）。

立即学习“前端免费学习笔记（深入）”；

• 显式提高权重：input:required, textarea:required, select:required 比单个 input:required 权重略高（多个选择器并列）
• 更稳妥：input[required] 和 input:required 权重相同，但前者兼容所有支持属性选择器的浏览器，且语义明确
• 如果用了 CSS-in-JS 或 scoped style（如 Vue <style scoped></style>），确认 :required 没被自动添加属性选择器隔离掉（例如变成 input:required[data-v-xxx]）

事情说清了就结束。真正卡住人的，往往不是伪类本身，而是它依赖的 HTML 结构是否真实、是否被 JS 干扰、以及 Safari 那个藏得挺深的组合伪类 bug。