如何添加！重要的课程

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。在我的浏览器中，我得到以下结果：

我尝试在ui-autocomplete中为z-index添加！important，但它看起来像！重要的不能应用于类（仅用于id）。我无法添加ID，因为有很多地方使用此下拉菜单。有没有办法在模态前面制作下拉菜单？

由于

Answer 1

!important应该是你达到的最后一件事，如果你确实达到了它。

要使规则覆盖其他规则，

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

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