可通过CSS属性选择器[type="xxx"]精准匹配button和input的type值，为submit、reset、button等类型设置差异化样式，提升可维护性与语义一致性，并支持伪类组合增强交互体验。
可以通过 CSS 属性选择器（[type="xxx"]）精准匹配不同 <button></button> 或 <input> 元素的 type 值，从而为提交、重置、普通按钮等应用独立样式，避免混用 class，提升可维护性。
区分 <input> 类型按钮
<input> 元素常用 type="submit"、type="reset"、type="button"，它们语义和行为不同，样式也应有明显差异：
-
提交按钮：用绿色背景+粗体文字，传达“确认”动作
input[type="submit"] { background: #4CAF50; color: white; font-weight: bold; } -
重置按钮：用橙色或浅灰，降低视觉权重，避免误点
input[type="reset"] { background: #FF9800; color: white; } -
普通按钮：用中性蓝或透明边框，常用于 JS 触发操作
input[type="button"] { background: #2196F3; border: none; }
区分 <button></button> 的隐式 type
<button></button> 默认 type="submit"，但可显式设为 type="button" 或 type="reset"。CSS 属性选择器同样适用：
-
button[type="submit"]—— 表单内默认按钮，建议保持高辨识度 -
button[type="button"]—— 纯交互按钮（如展开菜单），适合浅色背景+描边button[type="button"] { background: transparent; border: 1px solid #999; } -
button[type="reset"]—— 应与input[type="reset"]样式一致，保证体验统一
注意优先级与浏览器兼容性
属性选择器权重为 10，低于 class（100），但高于标签选择器（1）。若同时存在 .btn 和 button[type="submit"]，后者不会覆盖前者，需合理设计层级：
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：先定义通用样式，再用属性选择器增强特定类型
button { padding: 8px 16px; border-radius: 4px; }<br>button[type="submit"] { background: #2E7D32; } - IE8+ 完全支持
[type="xxx"]，无需前缀或 polyfill - 不推荐用
[type]（无值匹配）来统配所有按钮，易误伤非按钮控件（如input[type="text"]）
配合伪类提升可用性
属性选择器可与伪类组合，实现更精细控制：
- 禁用状态统一处理：
button[type="submit"]:disabled, input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; } - 聚焦时添加轮廓（无障碍友好）：
input[type="button"]:focus { outline: 2px solid #2196F3; outline-offset: 2px; } - 悬停反馈差异化：
button[type="reset"]:hover { background: #E64A19; }
