输入类型="按钮"没有用类覆盖样式,但是普通按钮是？

Question

我有一个我正在使用的按钮类,它会覆盖我的默认button或input type="button"元素的渐变.以下是默认代码:

input[type="button"], input[type="submit"], input[type="reset"], button {
  background:#05ABE0;
  background:linear-gradient(to bottom, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  background:-moz-linear-gradient(top, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  background:-ms-linear-gradient(top, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  background:-o-linear-gradient(top, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #87E0FD), color-stop(25%, #53CBF1), color-stop(50%, #05ABE0));
  background:-webkit-linear-gradient(top, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  border:solid 2px #0076A3;
  border-radius:0.3em;
  -moz-border-radius:0.3em;
  -o-border-radius:0.3em;
  -webkit-border-radius:0.3em;
  font-size:1em;
  padding:0.4em;
  display:inline-block;
  margin-right:5px;
  margin-left:5px;  
  font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
  color:white;
  vertical-align:middle;
  text-shadow:rgba(0, 0, 0, 0.7) 0px 2px 2px; 
  box-shadow:inset 0 1px 1px white;
  -moz-box-shadow:inset 0 1px 1px white;
  -webkit-box-shadow:inset 0 1px 1px white;     
  background-size:100% 200%;
  -moz-background-size:100% 200%;
  -o-background-size:100% 200%;
  -webkit-background-size:100% 200%; 
  -moz-transition:all 0.1s linear;
  -o-transition:all 0.1s linear;
  -webkit-transition:all 0.1s linear;
}

这是覆盖类:

.orange {
  border:2px solid #BF4619;
  background: #FF7700;
  background:linear-gradient(to bottom, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background:-moz-linear-gradient(top, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background:-ms-linear-gradient(top, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background:-o-linear-gradient(top, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFD0A8), color-stop(25%, #FFAE68), color-stop(50%, #FF7700));
  background:-webkit-linear-gradient(top, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background-size:100% 200%;
  -moz-background-size:100% 200%;
  -o-background-size:100% 200%;
  -webkit-background-size:100% 200%; 
}

当我用<button type="button" class="orange">Orange button</button>它工作正常,但是当我使用<input type="button" class="orange" value="Orange button" />它恢复为默认的样式是不是在orange类.为什么是这样？

PS:如何在Stackoverflow上进行多行缩进？这就是为什么我的代码都在示例中的同一个块中.

Answer 1

Leniel Macaferi是对的,但他没有解释原因.原因是特异性,它决定了具有相同重要性和起源的规则的级联顺序; 在CSS2和CSS3中都input[type="button"]具有特异性11,因为它有一个属性选择器和一个类型选择器,同时.orange具有特异性10,因为它有一个类选择器.在button选择器的情况下,特异性1与button元素类型一样,因此.orange覆盖它.(在特异性相同的情况下,文档中的后续选择器优先.)

修复:使用.orange.orange而不是.orange获得特异性20,因为CSS3中明确允许重复的简单选择器(因此它应该适用于大多数现代浏览器,以及任何不尝试智能且不会增加重复简单选择器的特异性的旧版本).

替代修复:[type="button"]而input[type="button"]不是降低第一个规则的特异性,但如果HTML中的非输入元素已type="button"设置,则可能会产生问题,如此JSFiddle中所示.

用法!important每个属性也将解决你的问题,但是当规则也有一个或两个属性,你必须申请,这只是真正有用!important到每个属性.

更多信息:
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity
http://www.w3.org/TR/selectors/#specificity