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;
}

当我查看 chromes 检查元素时，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 的特异性（使用新班级或更明确认可的父母，您应该能够不那么混乱地制定解决方案。