異なるボタンを送信するスタイル

Question

私は特定の方法で見える送信ボタンがありますが、別のページに異なる送信ボタンを表示したいのですが。私は2番目の送信ボタンのスタイルを変更する方法を理解するのに苦労しています。

HTMLが最初のボタンのために次のようになります。

<button type="submit">Submit</button> 

CSSは次のようになります。

.button2 { 

/*bunch of code 

} 

が、私：私はのようなものを作成しようとした

input[type="submit"], 
button[type="submit"] { 
    height: 50px; 
    line-height: 48px; 
    border: 2px solid #47b475; 
    background: #47b475; 
    color: #fff; 
    width: 100%; 
    font-size: 11px; 
    text-transform: uppercase; 
    font-weight: bold; 
    letter-spacing: 1px; 

} 

試してください：

<button type="submit" class="button2">Submit</button> 

これは機能しませんので、私は明らかに何かが欠けています。助けてください！

おかげ

Answer 1

あなただけCSSセレクタの特異性の問題に遭遇しました。
あなたはそれをより具体的にするため、任意の下の特異スタイル

input[type="submit"], 
 
button[type="submit"] { 
 
    height: 50px; 
 
    line-height: 48px; 
 
    background: #47b475; 
 
    border: 2px solid #47b475; 
 
    color: #fff; 
 
    width: 100%; 
 
    font-size: 11px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    letter-spacing: 1px; 
 
} 
 

 

 
input[type="submit"].button2, 
 
button[type="submit"].button2{ 
 

 
    background: #1CEA6E; 
 
    border: 2px solid #1CEA6E; 
 

 
}

<button type="submit">Submit</button> 
 
<button type="submit" class="button2">Submit</button>

を上書きするために、あなたのクラス .button2前 input[type="submit"]を繰り返す必要があります