javascript - 如何将自定义样式应用于 ui-select 动态创建的下拉对象？

Question

我正在开发一个使用 AngularJS v1.5.8 的单页应用程序。我正在尝试进行简单的视觉更改，但找不到操作方法。

有一个 <ui-select>从来自后端的列表中填充的下拉对象。它工作正常，但我需要使下拉菜单更大一些。我一直在尝试将 CSS 类分配给生成的下拉列表，但没有成功。我应用于 ui-select 对象的样式似乎并未应用于作为下拉列表本身的 div。

ui-select 指令创建一个 <span> ID为“ui-devtype-span”。当我手动编辑此对象样式(如在 Chrome 开发人员工具中)时，我得到了我想要的结果。但是我的代码中不存在这个 span 对象。它似乎是动态生成的，它没有继承 ui-select 的样式。主题是“bootstrap”

<ui-select theme="bootstrap"
               ng-model="..."
               on-select="..."
               ng-disabled="..."
               append-to-body="true">
         <ui-select-match allow-clear="" >
          <span >
            {{$select.selected.name}}
          </span>
        </ui-select-match>
      <ui-select-choices
        repeat="group in ...
                 | orderBy: 'name'
                 | filter: $select.search">
        <span ng-bind-html="group.name | highlight: $select.search"></span>
      </ui-select-choices>
</ui-select>

我尝试将我的 css 类添加到此片段中的每个 HTML 标记，但我无法获得动态生成的 <span>为 45px 高。我无法以更广泛的方式更改指令样式，因为它在应用程序的其他地方使用，我的更改应该仅适用于此屏幕。

Answer 1

I cannot change the directive style in a broader way because it's used elsewhere in the application,

然后给指令一个id。

<ui-select id="select1" theme="bootstrap" ng-model="..."

还有我们descendent combinator

<style>
   #select1 span {
      font-size: 20px;
   }
</style>

或添加自定义类:

<ui-select class="my-select" theme="bootstrap" ng-model="..."

<style>
   .my-select span {
      font-size: 20px;
   }
</style>