css - 1 ページに異なるサイズのメニューボタン

Question

私のページには3つのメニューボタンがあります。それぞれに幅を変えたいと思います。このために、次のことを行いました。

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

ただし、これによりすべてのメニューボタンの幅が 180px に設定されます。幅をそれぞれ 180px、140px、160px にしたいと思います。どうすればこれを達成できますか？

Answer 1

これを試して：

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

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

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

Answer 2

それぞれに固有の識別子 (たとえば an id) が必要であり、それを使用してスタイルを設定します。:nth-child別の方法として、CSS3 ( documentation ) セレクターを使用することもできますが、それはおそらく必要以上のものです。