HTML按钮CSS样式不生效问题：submit类型input的样式规则无效果如何解决

问题原因 #

你的CSS样式不生效的核心问题是选择器写法错误：input 和属性选择器 [type=submit] 之间多写了一个空格。

CSS选择器中空格是后代选择器的标识：你写的 input [type=submit] 代表选中「input元素内部，所有type属性为submit的后代元素」，但你代码里的submit是input元素本身的属性，不是它的子元素，所以这个选择器匹配不到任何元素，样式自然不会生效。

修正方案 #

直接去掉选择器里的空格即可，正确写法如下：

input[type=submit] {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  background-color: white;
}

input[type=submit] 的含义是选中「本身type属性为submit的input元素」，完全匹配你写的HTML结构，样式可以正常生效。

补充提示 #

后续如果需要更灵活地控制这类按钮样式，也可以直接给input元素添加自定义class类名，用类选择器来匹配样式，优先级更可控，也能降低选择器写错的概率。

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