HTML中<button>的type与id属性用相同值效果不同是什么原因？

问题核心原因 #

你遇到的样式差异是因为混淆了HTML中id和type两个完全独立的属性，二者作用没有任何重叠，非法赋值导致样式匹配失败。

两个属性的功能差异 #

• id属性：是HTML元素的唯一身份标识符，作用是给CSS、JS提供定位该元素的标记。你课程中配套的CSS代码一定存在#increment-btn的ID选择器规则，将按钮背景设置为红色，教程代码中给按钮添加id="increment-btn"后，浏览器可以正确匹配到对应的样式，因此渲染为红色按钮。
• type属性：是<button>标签的原生功能属性，仅用于定义按钮的默认点击行为，合法取值只有三种：
  • submit：默认值，点击后提交所在表单
  • reset：点击后重置所在表单的输入内容
  • button：无默认行为的普通按钮
    你填写的type="increment-btn"属于完全非法的取值，浏览器会直接忽略该无效值，也不会将其作为样式匹配的标识。

运行逻辑差异 #

1. 解析教程代码<button id="increment-btn">INCREMENT</button>时：
   浏览器识别到元素ID为increment-btn，匹配到CSS中#increment-btn对应的红色样式规则，将样式应用到按钮上，最终显示红色。
2. 解析你的代码<button type="increment-btn">INCREMENT</button>时：
   浏览器识别到type属性为非法值，自动按默认type="submit"处理按钮行为，同时因为元素没有设置id="increment-btn"，无法匹配到对应的红色样式，最终显示浏览器默认的灰色按钮样式。

内容的提问来源于stack exchange，提问作者m.sam.ant