如何添加！重要的類

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應該是您所追求的最后一件事，如果確實可以做到的話。

要使您的規則優先於其他規則，

• 使您的規則更具體 。 您引用的兩個規則具有相同的特異性。 如果只是一類，則還要在規則中添加標簽，或添加第二類，或結構信息等。有關特異性計算的詳細信息在規范中 。

• 由於這兩個規則具有相同的特異性，因此您可以通過確保規則在CSS的應用順序中排在另一個規則之后來使規則獲勝。