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

0

input[type="button"]最初の CSS ルールに含まれているためです。

2 番目のボタンは<input>要素であり、最初の CSS ルールに一致します。

于 2013-07-03T16:37:32.457 に答える
-1

属性セレクター (input[type="button"]) は、クラス名よりも特異性が高いためです。

于 2013-07-03T16:44:27.733 に答える