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"，则可能会产生问题，如图所示在this JSFiddle。

对每个属性使用!important也可以解决您的问题，但只有当规则具有一个或两个属性时才会真正有用，因为您必须将!important应用于每个属性。

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

Answer 2

因为您在第一个CSS规则中有input[type="button"]。

您的第二个按钮是<input>元素，与第一个CSS规则匹配。

Answer 3

因为和属性选择器（input [type =“button”]）比类名更大specificity。

输入类型=“按钮”没有用类覆盖样式，但是普通按钮是？

3 个答案: