:required不生效是因为仅对带原生required属性的input、select、textarea有效，自定义组件未透传、动态添加或作用于label均无效；需结合:invalid实现空值高亮。
为什么 :required 有时不生效
直接写 input:required { border: 2px solid red; } 却没反应？常见原因是：表单控件没真正带 required 属性，或者用了自定义组件（如 React 封装的 Input）但没透传该属性。浏览器只认原生 HTML 的 required 布尔属性，JS 动态添加或 class 模拟都无效。
实操建议：
- 检查元素是否真有
required属性（用 DevTools 查看，不是看 class 或 data 属性） - 避免在
label上写:required——label本身没有required属性，得作用于其关联的input、select或textarea - 注意
contenteditable元素不支持:required
:required 能匹配哪些元素
它只对原生可提交的表单控件有效，且必须显式声明 required。不是所有带“必填”语义的元素都能命中。
能匹配的典型元素：
-
input（type="text"、"email"、"number"等，但"hidden"和"button"类型除外） -
select（含required属性时，即使第一个option是空值也触发） textarea
不能匹配的：
-
input[type="checkbox"]或[type="radio"]单独使用时 —— 它们需配合name和组内逻辑，:required对单个复选框/单选按钮无效（除非是唯一选项且设了required，但行为不稳定，不推荐依赖） - 自定义 Web Component（如
my-input），除非内部渲染出原生input并透传required
和 :invalid 配合使用的实际意义
:required 只管“是否被声明为必填”，不管当前值是否为空；而 :invalid 在字段为空或格式错误时才激活。两者叠加才能实现“未填必填项时高亮”的真实反馈。
推荐写法示例：
input:required:invalid,
select:required:invalid,
textarea:required:invalid {
background-color: #fff5f5;
border-color: #e04040;
}
注意点：
-
:invalid在用户还没交互前可能就触发（比如页面加载后select默认选空值），可用:user-invalid（Chrome 107+、Firefox 119+）缓解，但兼容性有限 - 不要只靠
:required做校验提示 —— 它无法替代 JS 的实时验证或setCustomValidity() - 若同时用
aria-required="true"，它不影响 CSS 选择器，只是辅助技术用途
在现代框架里怎么让 :required 可靠工作
React/Vue/Svelte 中，JSX 或模板语法容易漏掉原生属性透传。比如一个封装的 TextInput 组件，如果 props 没包含 required 并挂到底层 input 上，CSS 就完全失效。
关键检查项：
- 确保组件接收
requiredprop，并原样传递给原生input（React：用{...props}或显式写required={required}） - 避免用
defaultValue+required组合导致初始校验失败 —— 若字段本应为空，就别设required，或用 JS 控制初始状态 - SSR 场景下，服务端渲染时必须输出
required属性，否则首屏 CSS 不生效
复杂点在于：样式生效依赖 HTML 结构真实性，而框架抽象层常常悄悄绕过它。一旦漏掉一个属性透传，整个视觉反馈链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
