php - CSS を同じクラスだが別の入力名に変更する方法

Question

ページに 5 つのボタンがあり、それらの CSS のスタイルを変更して異なるものにしたいのですが、その方法がわかりません。コードは次のとおりです。

<input input class='field' type='button' name='a4' value='A4'/>
<input input class='field' type='button' name='a3' value='A3'/>
<input input class='field' type='button' name='a2' value='A2'/>
<input input class='field' type='button' name='a1' value='A1'/>
<input input class='field' type='button' name='a'  value='A'/>

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

.field {
    width: 120px;
}

.field a1 {
    width: 220px;
}

Answer 1

属性セレクターを使用できます：

.field[name='a1'] {
    color: blue;
}

これは、すべての主要なブラウザで非常によくサポートされています。デモはこちらから入手できます。