在一个页的不同大小的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>