必须用[type="submit"]、[type="reset"]、[type="button"]精准匹配，因单独写button或input会误覆盖其他语义按钮或非按钮控件，导致样式冲突、误点风险及维护困难。
直接用 [type="submit"]、[type="reset"]、[type="button"] 这三类属性选择器，就能精准重置不同语义按钮的样式，避免误伤其他元素或破坏表单行为逻辑。
为什么不能只写 button 或 input？
单独使用 button 会一并覆盖所有 <button>（包括 type="button" 和 type="submit"），而 input 又会连带影响 type="text"、type="email" 等非按钮控件。实际项目中，提交、重置、普通按钮往往需要完全不同的视觉权重和交互反馈，混用选择器会导致样式冲突或维护困难。
常见错误现象：button { background: #007BFF; } 后，<button type="reset"> 也变成蓝色，用户容易误点重置；或者 input { padding: 6px; } 把密码框也压扁了。
- 优先级上，
[type="xxx"]权重为 10，低于 class（100），但高于标签选择器（1），足够压制浏览器默认样式 - 兼容性无问题：IE7+、所有现代浏览器均支持标准属性选择器
- 不推荐用
*[type]全局匹配——它会命中input[type="hidden"]等不该样式化的元素
如何分别重置 submit/reset/button 的默认外观？
浏览器对 <button> 和 <input> 的 type 值有隐式行为，但默认样式（如边框、背景、字体粗细）不统一。重置目标不是“清空”，而是“归一化 + 区分”：
立即学习“前端免费学习笔记（深入）”；
例如，清除所有按钮的默认边框和内边距，再按语义赋予差异：
input[type="submit"],
input[type="reset"],
input[type="button"],
button[type="submit"],
button[type="reset"],
button[type="button"] {
margin: 0;
padding: 8px 16px;
border: 1px solid #ccc;
background: transparent;
font: inherit;
cursor: pointer;
}
input[type="submit"],
button[type="submit"] {
background: #4CAF50;
color: white;
font-weight: 600;
}
input[type="reset"],
button[type="reset"] {
background: #FF9800;
color: white;
}
input[type="button"],
button[type="button"] {
background: #2196F3;
color: white;
border-color: #1976D2;
}
- 必须同时写
input[type="xxx"]和button[type="xxx"]—— 因为两者在 HTML 中并存，且语义等价 -
font: inherit比font-size: 100%更可靠，能继承父容器字体设置，避免表单内文字变小 - 不要漏掉
cursor: pointer，否则type="button"在部分浏览器中 hover 时无手型光标
遇到 disabled 状态怎么办？
disabled 是独立属性，需显式组合处理，否则重置后禁用按钮看起来和可用按钮一样，造成 UX 风险：
input[type="submit"]:disabled,
button[type="submit"]:disabled {
background: #bcbcbc;
color: #666;
cursor: not-allowed;
}
- 务必用
:disabled伪类，而不是[disabled]属性选择器——后者不匹配通过 JS 动态设置el.disabled = true的元素 - 禁用状态的颜色对比度要达标（至少 4.5:1），
#bcbcbc对#666在白底上勉强合格，深色主题下需另配 - 不要只改颜色，
cursor: not-allowed是用户感知“不可点”的关键信号
真正难的不是写对选择器，而是记住：表单按钮的 type 决定行为，CSS 属性选择器决定样式，二者必须严格对应；一旦漏掉某一种 type 或某一种标签（input vs button），就会在某个角落冒出一个“不听话”的按钮。
