css - 如何设置特定 select2 的 z-index

Question

我正在尝试在我的屏幕上设置特定 select2 组件的 z-index，因为它需要高于 Top_Menu，然后我希望 select2 的其余 z-index 为 0。所以我写了这个

.Top_Menu.OSInline > .select2-container { 
    z-index: 50 !important;
}

.select2-container { 
    z-index: 0;
}

当我查看 chrome inspect 元素时，z-index 已按预期应用，但在使用小部件时它的 z-index 仍然为 0，因为它仍在 .Top_Menu 下(Top_Menu 的 z-index 是当前设置为 2)

Answer 1

select2-container{z-index: 0;} 从未被使用(即使稍后加载)因为 select2-container 具有较低的特异性 比 .Top_Menu.OSInline > .select2-container。

例如，

/*Loaded first, Most Specific*/
div.MoreThan > div.ALittleSpecific {
  color: blue;
}

/*Loaded second, Kindof Specific*/
div.ALittleSpecific {
  color: red;
}

/*Loaded last, Least Specific*/
div {
  color: green;
}

<div class="MoreThan">
<div class="ALittleSpecific">
  Specificity Trumps Load Order
</div>
</div>

增加第二个 .select2-container 的特异性(使用新类或更明确认可的父类，您应该能够更轻松地制定出解决方案。