使用 :required 伪类可自动识别必填表单元素并设置样式，如通过 border-left 高亮必填项、结合 :has() 在 label 后添加红色星号标识，同时用 :invalid 和 :valid 控制校验状态边框，提升表单可读性与用户体验。
表单元素是否必填，可以通过原生的 :required 伪类来判断，并据此设置不同的样式。这样无需额外添加 class 或 data 属性，就能自动识别必填项并进行视觉提示。
使用 :required 和 :optional 伪类
HTML 中设置了 required 属性的表单元素（如 input、select、textarea），会匹配 :required 伪类；没有该属性的则会匹配 :optional。
常见的用法如下：- 给所有必填项添加边框高亮或背景色
- 在标签前添加星号（*）表示必填
- 区分可选与必填项的视觉层级
示例 CSS：
input:required,
select:required,
textarea:required {
border-left: 3px solid #ff4d4f;
background-color: #fff9f9;
}
input:optional,
select:optional,
textarea:optional {
border-left: 1px dashed #ccc;
}
结合标签添加必填星号
如果想在表单标签前动态添加“必填”标识，可以配合 :before 伪元素实现。
立即学习“前端免费学习笔记（深入）”；
假设 HTML 结构为：
CSS 添加星号：
label + input:required:before {
content: "*";
color: #ff4d4f;
margin-right: 4px;
font-weight: bold;
}
注意：:before 不能直接作用于 input 元素（因为 input 是替换元素，不支持伪元素插入内容）。所以通常采用以下方式之一：
- 把星号放在 label 内部或前面
- 使用包裹容器，对容器使用 :before
更稳妥的做法是通过 label 控制：
label:has(+ input:required)::after,
label:has(+ textarea:required)::after,
label:has(+ select:required)::after {
content: " *";
color: #ff4d4f;
font-size: 14px;
}
说明：:has() 是父选择器，目前主流浏览器已支持。它能选中后面紧跟必填输入框的 label。
处理浏览器默认校验样式
当用户提交未填写的必填项时，浏览器会触发默认验证并可能显示特殊样式（如红色边框）。你可以通过 :invalid 和 :valid 进一步控制这些状态。
input:required:invalid {
border-color: #ff4d4f;
box-shadow: 0 0 2px #ff4d4f;
}
input:required:valid {
border-color: #52c41a;
}
建议组合使用：required + invalid 来精准定位未填的必填项。
基本上就这些。利用 :required 伪类，可以干净、高效地实现必填表单元素的样式区分，提升用户体验又减少冗余代码。
