如何将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

您可以使用attribute selector：

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

所有主流浏览器都非常well-supported。有一个演示here。