在id

Question

我选择使用jquery-ui

$(function() {
  $("#number")
    .selectmenu()
    .selectmenu("menuWidget")
    .addClass("overflow");
});

fieldset {
  border: 0;
}

label {
  display: block;
  margin: 30px 0 0 0;
}

.overflow {
  height: 200px;
}

.ui-menu-item{
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="number">Select a number</label>
<select name="number" id="number">
  <option>1</option>
  <option selected="selected">2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
</select>

Snippet无效，所以这里是小提琴链接

https://jsfiddle.net/vgm3txh6/8/

当我设置这样的课程时，一切都没问题

  

的.ui菜单项目{     font-weight：bold;   }

但是当我需要在特定的id下使用它时，例如像

> #number.ui-menu-item{
  font-weight: bold;
}

我不适用风格。

我的问题在哪里？

Answer 1

您的id=number不是ui-menu-item课程的家长。 但是id=number-menu是。

由于>是父选择器，因此您需要使用下面给出的数字菜单

#number-menu > .ui-menu-item{
  font-weight: bold;
}

解决方法：https://jsfiddle.net/vgm3txh6/41/

Answer 2

你需要在#number之后用class .ui-menu-item选择所有连续的div元素。这是选择器：

#number ~ div .ui-menu-item{
  font-weight: bold;
  color: white;
}

Answer 3

#number-menu .ui-menu-item{
  font-weight: bold;
}

我发现它在select#number

之后自动创建了一些元素

select#number中显示的选项位于此元素ul#number-menu

中

Answer 4

jQuery UI生成新的dom元素，因此它获得新的#number-menu。

#number-menu .ui-menu-item{
    font-weight: bold;

}