クラスとidの交互にCSSを作成する

Question

私はステップバイステップの手順のための体系を作りました。最終的には、多くのオプション、ボタン、方法があります。しかし、現時点では、私は赤ではないボタンをペイントしようとしています。しかし、CSSは "クラス"に接続されています。どのようにして "Form" Formingに使用される "class"よりも高い優先順位を持つ "id"を作成しますか？

JSFiddle

<input type="button" name="coughyes" class="next action-button" id="red" value="Yes" /> 

/*buttons*/ 
#msform .action-button { 
    width: 100px; 
    background: #27AE60; 
    font-weight: bold; 
    color: white; 
    border: 0 none; 
    border-radius: 1px; 
    cursor: pointer; 
    padding: 10px 5px; 
    margin: 10px 5px; 
} 

#red { 
    background-color: red; 
} 

Answer 1

あなたが同じセレクタを使用して、あなたのIDを追加することができます。

#msform .action-button#red { 
    background-color: red; 
} 

ページでIDを1回しか使用できないため、クラスを使用する必要があります。あなたのHTMLとCSSに...あなたのフィドル更新

<input type="button" name="coughyes" class="red next action-button" value="Yes"> 
<input type="button" name="coughno" class="red next action-button" value="No"> 

#msform .action-button.red { 
    background-color: red; 
} 

を更新http://jsfiddle.net/1x183c2t/3/

Answer 2

それとも、同じマークアップを維持したいならば、あなたは、単にbackground-color: red !important;からbackground-color: red;を変更することができます。