如果子元素存在，则覆盖父样式

Question

我想为包含特定类的每个子元素覆盖父z-index。

有两类不同的孩子（因为它是由API生成的，所以我无法改变）。

首先是.pop-up，第二个是.label。 两者都将添加到#info。

下

HTML结构

<div id="info">
   <div class="pop-up">...</div>
</div>
<div id="info">
   <div class="label">...</div>
</div>

由于API动作不同，.label有时会在最近呈现时显示在最前面。 #info z-index 总是 110。

因此，我想检查一个子元素是否存在（例如.label）并将父母z-index更新为109。

css3这可能吗？由于＆＃34;协议＆＃34;我无法通过JS进行黑客攻击。

这是我尝试过的，但无法更新父母z-index

div#info > div.label {
   z-index: 109 !important;
}

Answer 1

不，遗憾的是CSS3无法实现。这是因为CSS3 lacks a parent selector 。

应该注意的是，通过 CSS4 ， the :has pseudo-class 可以成为，其中当它包含标签时，您可以定位#info：

div#info:has(div.label)