:required伪类仅匹配必填状态，不生成内容；input:required::after不生效因input是替换元素，伪元素必须挂载到label等容器上，如label:has(input:required)::after或降级用label.required::after。
:required 伪类本身不显示任何内容，只做状态匹配；要让必填项“看得见”，必须配合样式规则或伪元素，否则写了也白写。
为什么 input:required::after 不生效
因为 input 是替换元素（replaced element），Chrome、Firefox、Safari 都不支持在其上使用 ::before 或 ::after。写 input:required::after { content: "*" } 看似合理，实际完全被忽略——控制台不报错，但星号就是不出现。
- 唯一可靠路径是把伪元素挂到支持它的容器上，比如
label - 若
label用for属性关联控件（如<label for="email">邮箱</label><input id="email" required>），可用label:has(input:required)::after - 若项目需兼容 Safari ≤15.3 或旧版 Firefox，
:has()不可用，得退回到显式加 class：<label class="required">姓名</label>，再写label.required::after -
content值必须带引号，如content: " *"；用margin-left比margin-right更稳，避免换行错位
input:required 边框/背景色为何有时不显示
不是选择器写错了，而是样式被覆盖或计算异常。常见原因包括：
- 重置 CSS（如 Normalize.css）清掉了默认边框，但没显式声明
box-sizing: border-box，导致加了border却“看不见” - 用了
appearance: none却没补全border和background，浏览器渲染逻辑被干扰 - 优先级不够：比如全局
input { border: 1px solid #ccc; }覆盖了input:required { border: 2px solid #e53935; } - 只写了
input:required，漏了select:required和textarea:required，下拉和多行文本没高亮
如何区分“该填”和“没填对”
:required 只管“是否被标记为必填”，不反映填写状态。真正校验靠 :valid 和 :invalid，但要注意默认行为：
-
input:required:invalid在页面加载后立即触发，用户还没动就红框——体验差 - 现代解法是叠加
:user-invalid（Chrome 102+、Firefox 119+ 支持）：input:required:user-invalid只在用户交互后才激活 - 更保守的写法是加
:not(:placeholder-shown)过滤掉占位符还在时的误判：input:required:invalid:not(:placeholder-shown) - 别忘了
input:required:valid可用于成功态反馈，比如绿色边框或对勾图标
表单重置后星号或样式残留怎么办
点 <button type="reset"></button> 后，DOM 中 required 属性还在，但浏览器不会重新触发 :required 的样式重绘，看起来像“星号没消失”或“红框还挂着”。这不是 bug，是预期行为。
- CSS 无法监听 reset 事件，必须靠 JS 干预：监听
reset事件，然后手动清除自定义 class 或重置伪元素依赖的状态 - 如果用的是
label:has(input:required)::after，重置后input值为空但required属性仍在，星号自然还在——这是正确的，因为字段仍是必填项 - 真正要重置的是校验态（
:user-invalid），它会随 reset 自动清掉，无需额外处理
最易被忽略的点：伪元素星号和边框样式解决的是“识别问题”，而 :user-invalid 或 :invalid:not(:placeholder-shown) 才解决“反馈问题”；两者缺一不可，且不能混用旧逻辑去套新交互场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
