동일한 클래스이지만 다른 입력 이름으로 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입니다.