表单样式控制应优先使用属性选择器；input[type="text"]等按语义锁定类型，:focus/:disabled等伪类响应状态，required等属性匹配特定HTML属性，避免全局重置和滥用类名。
表单样式控制，核心就靠属性选择器，不是类名也不是ID——因为表单元素类型多、状态多、语义强，用 [type="text"] 这类写法才精准、可维护、不污染结构。
哪些选择器真正管用？优先级和适用场景要分清
表单样式中，真正高频、不可替代的是属性选择器；类选择器（.form-input）适合业务封装，ID 选择器（#email）仅限唯一锚点或 JS 操作，**不推荐用于通用样式定义**。原因很实际：一个页面可能有几十个 <input>，但只有几个是密码框、几个是数字输入、几个带必填标记——靠属性值区分最自然。
-
input[type="text"]、input[type="password"]、input[type="email"]：按语义锁定输入类型，样式互不干扰 -
input:disabled、input:focus、input:valid：用伪类响应用户交互与校验状态 -
input[required]、textarea[rows="4"]：匹配带特定 HTML 属性的元素，比加 class 更轻量 - 避免滥用
input（无属性）全局重置：它会误伤type="submit"或type="checkbox"，导致按钮变宽、复选框错位
为什么不用类选择器统一处理？——真实协作中的坑
团队里常见错误是写一个 .input-field 类，然后所有 input 都硬塞进去。问题立刻浮现：
- 密码框需要隐藏文字，但文本框不需要——你得再写
.input-field.password，权重叠加、命名膨胀 - 第三方组件（如 Vue 的
<el-input></el-input>）默认不给你加 class，你得靠深度选择器或覆盖属性选择器，反而更麻烦 - 表单验证时，JS 动态加
class="error"，但原始样式若依赖input[type="text"]，两者完全解耦，不会打架
正确做法是：基础样式用属性选择器定义，增强状态用伪类，业务差异用类名微调——比如 input[type="text"].search-input。
立即学习“前端免费学习笔记（深入）”；
实操建议：一套最小可用表单样式模板
以下代码覆盖 90% 常见需求，不依赖框架，兼容 IE11+，关键是「只改该改的」：
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 12px;
margin: 6px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 239, 0.2);
}
input:disabled {
background-color: #f5f5f5;
cursor: not-allowed;
}
input[required]::after {
content: " *";
color: #f56c6c;
font-size: 0.85em;
margin-left: 4px;
}
注意：box-sizing: border-box 必须加，否则 padding + border 会让 width 超出容器；::after 伪元素不能用于自闭合标签（如 <input>），所以这里只对 input[required] 生效是安全的——但别试图给 input[type="checkbox"] 加 ::after，它不渲染。
最常被忽略的一点：表单控件的默认垂直对齐方式（vertical-align: baseline）会导致 label 和 input 不在一条线上，加一句 input, select, textarea { vertical-align: middle; } 就能省掉一半调试时间。
