用户代理样式表覆盖input[type=submit]文本色导致hover效果失效问题

问题原因 #

• 核心是CSS优先级和继承规则共同导致的：
  1. 你编写的.btn类没有显式声明color属性，它的文本色是继承自父级body设置的#fff。而用户代理样式表的input[type="submit" i]是直接给input元素显式设置了color属性，直接作用于元素的样式优先级永远高于继承来的样式，所以默认状态下文本色被覆盖。
  2. 关于hover状态文本色不生效：用户代理的input[type="submit" i]是属性选择器，权重为10，和类选择器的权重相同。你没有给.btn显式设置默认color的前提下，部分浏览器会优先使用原生表单控件的内置样式，甚至会给input[type="submit"]:hover也内置了文本色规则，优先级和你的.btn:hover（类+伪类，权重20）接近甚至更高，导致hover的文本色不生效。
  3. 你提到a标签应用样式正常，是因为你大概率已经全局重置了a标签的默认样式（比如设置了a {color: inherit;}），所以a标签可以正常继承父级文本色，不会和用户代理样式冲突。

无冗余解决方案 #

不用重复写按钮样式规则，只要加一行代码就能解决：

方案1：给.btn类补全color声明 #

直接在你的.btn类里显式设置文本色即可，自定义CSS加载顺序晚于用户代理样式，相同权重下会覆盖默认规则：

.btn {
    display: inline-block;
    border-radius: 5px;
    padding: 1.2rem;
    margin: 1rem;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    color: #fff; /* 新增这一行即可 */
}

修改后默认状态和hover状态的文本色都会正常生效，所有应用.btn类的元素逻辑完全统一，没有冗余代码。

方案2：全局重置表单控件样式（更通用） #

如果后续还要给其他表单控件（button、input、select等）应用通用样式，可以加一段全局重置规则，一次性解决所有表单元素的默认样式冲突：

input, button, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

这段规则会让所有表单控件默认继承父级的字体、文本色等属性，完全不需要修改你现有的按钮类代码。

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