jquery - 如何添加 !important 到类

Question

我的下拉菜单隐藏在模式后面(我正在使用 bootstrap Modal)，我尝试了几种方法来解决这个问题，但都没有用。这是代码:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all"
id="ui-id-2" tabindex="0" style="display: none; top: 813px; left: 76px; width: 239px;">
<li>....</li>
</ul>

我的自动完成 CSS 是:

.ui-autocomplete {
border:1px solid #b2b8bd;
font-size: .750em;
max-height: 300px;
overflow-y: auto;
z-index:9999;
}

但是在我的其他 scss 文件中，我定义了 $zindex-modal-background: 1040 !default; 并且 ui-front 的定义是

.ui-front {
z-index: $zindex-modal-background;}

看起来 ui-front 样式覆盖了 autucomplete z-index。在我的浏览器中，我得到以下结果:

我尝试将 !important 添加到 ui-autocomplete 中的 z-index，但看起来 !important 不能应用于类(仅适用于 id)。我无法添加 id，因为有很多地方使用此下拉菜单。有没有办法在模式前面显示下拉菜单？

谢谢

Answer 1

!important 应该是您最后要伸手去拿的东西，如果您真的伸手去拿的话。

要使您的规则覆盖其他规则，

• 使您的规则更具体。您引用的两条规则具有相同的特异性。如果它只是一个类，也可以在规则中添加一个标签，或者第二个类，或者结构信息等。关于特异性计算的详细信息是in the spec。 .

• 由于这两个规则具有相同的特异性，您可以通过确保它在 CSS 的应用顺序中位于另一个规则之后来使您的规则获胜。

  <