:required不生效主因是元素缺失required属性、框架未透传或旧版Safari不支持；仅匹配原生支持该属性的input（非hidden等类型）、select、textarea；需配合:invalid实现精准反馈，并兼顾无障碍。
为什么 :required 有时不生效
直接写 input:required { border: 2px solid red; } 却没反应？常见原因是：表单控件没带 required 属性，或用了自定义封装（如 React 中未透传该属性），又或者浏览器兼容性被忽略——:required 在 IE10+ 和所有现代浏览器都支持，但旧版 Safari（≤8）不支持，若需兼容，得 fallback 到类名或 JS 标记。
:required 能匹配哪些元素
它只作用于原生支持 required 属性的表单控件，包括：input（除 type="hidden"、"button"、"image"、"reset"、"submit" 外）、select、textarea。注意：input type="checkbox" 或 radio 组即使逻辑上“必选”，也必须显式加 required 才能被 :required 匹配；否则样式不会触发。
-
<input type="email" required>✅ 可匹配 -
<input type="checkbox">❌ 不加required就不匹配 -
<div contenteditable="true">❌ 不是表单控件，:required完全无效
配合 :invalid 做更精准的视觉反馈
仅靠 :required 只能标识“该填”，不能反映“还没填”或“填错了”。实际中建议组合使用：:required:invalid 表示必填但为空或格式错误；:required:valid 表示已填且合法。这样可避免用户刚点进输入框就看到红色边框（此时尚未输入，:invalid 已触发）。
典型做法：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
input:required:invalid:not(:placeholder-shown) {
border-color: #d32f2f;
}
input:required:valid {
border-color: #388e3c;
}
其中 :not(:placeholder-shown) 是关键——排除 placeholder 还在显示时的误判，防止空输入框一聚焦就变红。
别忘了无障碍和可访问性影响
纯视觉标识（比如只改边框色）对色觉障碍用户不友好。必须同步提供其他通道：例如用 ::after 添加星号（content: "*"），或通过 aria-label 补充说明。更稳妥的是保留传统星号标记（<label>邮箱 *），再用 CSS 隐藏冗余文字，仅对屏幕阅读器暴露。
容易被忽略的一点：如果用 display: none 隐藏星号，屏幕阅读器也会跳过它。应改用 visually hidden 技巧：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
然后 <span class="sr-only">（必填）</span> 就能被读屏软件识别，又不影响视觉布局。
