HTML form标签使用id设置样式无效，替换为class后生效是什么原因？

你提供的示例代码 #

<form id="contact-form">
        <label>Subject</label>
        <input class="input-field" type="text" name="subject">
        <label>Email</label>
        <input class="input-field" type="text" name="email">
        <label>Message</label>
        <input id="submit-button" type="submit" value="Send">
</form>

#contact-form{
display: block
}

常见原因 #

• ID重复冲突
  HTML规范要求ID在整个页面中必须唯一，如果你页面中存在多个id="contact-form"的元素，CSS选择器#contact-form只会匹配第一个出现的对应ID元素，后续同ID元素样式不会生效。而class允许重复应用到多个元素，所以替换为class后可以正常匹配所有目标元素。
• CSS优先级被覆盖
  ID选择器权重为100，如果存在其他更高权重的选择器匹配到该form元素，就会覆盖你写的ID选择器样式，比如带父级ID的组合选择器、加了!important的同属性样式，都会覆盖普通ID选择器的规则。如果你写的class选择器优先级刚好高于其他冲突样式（比如class选择器声明在冲突样式之后，权重相同的情况下后声明的规则优先级更高），就会正常生效。
• 选择器大小写不匹配
  HTML的ID属性是大小写敏感的，如果CSS里写的是#Contact-Form，而HTML里的ID是contact-form，二者无法匹配，样式不会生效。替换class时如果大小写刚好对应，就可以正常生效。
• 测试样式与默认样式重合
  你示例中设置的display: block本身就是form元素的浏览器默认样式，设置后不会有视觉变化，容易让人误以为ID样式没生效。如果替换为class时同时修改了其他可感知的属性（比如边距、背景色），自然会看到效果。

排查方案 #

1. 打开浏览器开发者工具（按F12唤起），选中目标form元素，查看「样式」面板，找到你写的#contact-form规则，若规则被划掉，说明被更高优先级的样式覆盖，面板会显示覆盖该规则的样式来源
2. 全局搜索HTML代码，确认contact-form的ID在整个页面中只出现一次
3. 检查CSS选择器的拼写、大小写是否和HTML中的ID完全一致
4. 测试时替换为辨识度高的样式验证，比如#contact-form { border: 2px solid red; }，看form是否出现红色边框

内容的提问来源于stack exchange，提问作者Jumba Mark