:required伪类仅匹配原生支持required属性的表单元素（input/select/textarea）且html中真实存在required属性；js设置property、框架未透传、shadow dom隔离、safari旧版bug或选择器错误均会导致失效。
required伪类为什么没生效
因为:required只匹配带有 HTML required属性（attribute）的元素，不是 JS 设置的 property。比如用el.required = true或 React 中写required={true}但没渲染出required这个字符串属性，样式就不会触发。
常见失效场景：
- 在 Web Components 的 Shadow DOM 里，
:required无法穿透，得在 shadow root 内单独写样式 - 用
el.setAttribute('required', '')后立即查样式，Safari 旧版本可能有延迟 - 写了
required=""或required="required"没问题，但required={false}在框架中可能被忽略甚至删掉
:required和:invalid一起用要注意什么
:required表示“声明为必填”，:invalid表示“当前值不合法”。两者叠加时，空值的required输入框在页面加载完就已是:invalid状态——哪怕用户还没点进去。
这会导致一些意外视觉反馈：
- 刚打开表单，所有空
required字段就显示红边，容易吓到用户 - 如果同时用
:focus:invalid做聚焦后校验，反而掩盖了初始空状态的问题 - 对
select，若默认项是<option value="" disabled selected></option>，它一加载就是:invalid，但用户还没操作过
怎么给required字段加星号但不破坏可访问性
视觉星号只是辅助，真正起效的是required属性本身。只靠 CSS 伪类加*，屏幕阅读器根本读不到“必填”语义。
必须三者齐备：
- HTML 层：写
required属性（必不可少） - 无障碍层：加
aria-required="true"（尤其老版 NVDA/JAWS 配合 IE 或旧 Safari 时更可靠） - 视觉层：用
label::after { content: " *"; color: #d32f2f; }，且确保高对比度模式下可见（别用 background-image 模拟星号）
注意：aria-required="false"在动态表单里比不写更清晰，但不能和required共存——逻辑冲突会让部分读屏报错。
required选择器在框架组件里怎么透传
像 React、Vue 或 Ant Design 这类封装过的组件，required不会自动落到内部原生input上。比如写<myinput required></myinput>，若组件没手动把required prop 绑定到真实input，那:required选不到，原生校验也失效。
检查和修复方式：
- 打开 DevTools，看最终渲染出的
input标签是否真有required字样 - 组件文档里找“支持原生属性透传”或“forwardRef + spread props”相关说明
- 手动绑定：比如 React 中用
<input required="{props.required}">，而不是只靠defaultProps
最易被忽略的一点：即使样式生效、JS 校验通过，若required没落到真实表单控件上，用户用键盘 Tab 到该字段再回车提交，浏览器照样不会拦截空值——因为校验对象根本不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
