4

我有一个按钮类，我正在使用它覆盖我的默认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 上进行多行缩进？这就是为什么我的代码在示例中都在同一个块中。

4

3 回答 3

8

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

修复：使用.orange.orange而不是.orange获得特定性20，因为在 CSS3 中明确允许重复的简单选择器（因此它应该适用于大多数现代浏览器，以及任何不尝试变得聪明且不会增加重复简单选择器的特异性的旧浏览器）。

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

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

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

于 2013-07-03T16:44:03.547 回答
0

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

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

于 2013-07-03T16:37:32.457 回答
-1

因为和属性选择器 (input[type="button"])比类名具有更大的特异性。

于 2013-07-03T16:44:27.733 回答