한 페이지의 다른 크기의 menubuttons

Question

내 페이지에는 3 개의 menubuttons가 있습니다. 나는 그들 각각에 대해 다른 너비를 갖고 싶다. 이를 위해 다음을 수행했습니다.

<style> 
    .ui-menu { 
    width : 180px; 
    } 
</style> 

그러나이 방법은 모든 menubuttons의 너비를 180px로 설정합니다. 폭 180px, 140px 및 160px를 각각 갖고 싶습니다. 이것을 어떻게 할 수 있습니까?

Answer 1

각각에 고유 한 식별자가 있어야합니다 (예 : id).이를 사용하여 스타일을 지정해야합니다. 또는 CSS3 :nth-child (documentation) 선택기를 사용할 수 있지만 필요에 따라 과용 될 수 있습니다.

Answer 2

이 시도 :

<style> 
.ui-menu:nth-child(1){ 
width : 180px; 
} 

.ui-menu:nth-child(2){ 
width : 140px; 
} 

.ui-menu:nth-child(3){ 
width : 160px; 
} 
</style>