: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"> ❌ 不是表单控件，<code>:required 完全无效

  配合 :invalid 做更精准的视觉反馈

  仅靠 :required 只能标识“该填”，不能反映“还没填”或“填错了”。实际中建议组合使用：:required:invalid 表示必填但为空或格式错误；:required:valid 表示已填且合法。这样可避免用户刚点进输入框就看到红色边框（此时尚未输入，:invalid 已触发）。

  典型做法：

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载

  input:required:invalid:not(:placeholder-shown) {
    border-color: #d32f2f;
  }
  input:required:valid {
    border-color: #388e3c;
  }

  其中 :not(:placeholder-shown) 是关键——排除 placeholder 还在显示时的误判，防止空输入框一聚焦就变红。

  别忘了无障碍和可访问性影响

  纯视觉标识（比如只改边框色）对色觉障碍用户不友好。必须同步提供其他通道：例如用 ::after 添加星号（content: "*"），或通过 aria-label 补充说明。更稳妥的是保留传统星号标记（<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> 就能被读屏软件识别，又不影响视觉布局。