Question

这是对Override parent style if child element exists

的后续问题

根据建议和评论，:has尚未得到支持，如果存在某个子元素，则无法修改父级的样式。仅仅css就不可能了。

我正在考虑将z-index属性传递给子节点，并将其从父节点中取消设置。

这是我尝试过的。

div#info {
   z-index: unset !important;
}

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

div#info > div.pop-up {
   z-index: 110; /* Pop-up should always appear on top */
}

但仍然没有奏效。这甚至可能吗？

这个想法是：使父元素没有样式，并且将在子元素中声明z-index。

注意：仅使用CSS3，不涉及scripts。 HTML元素和样式属性由API生成。

Answer 1

终于搞定了！

鉴于此 HTML结构：

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

我只是强迫父级没有样式属性，并将每个孩子的z-index属性标记为!important

div#info {
   z-index: unset !important;
}

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

div#info > div.pop-up {
   z-index: 110 !important; /* Pop-up should always appear on top */
}

这适合我的需要。不确定它是否一般有用，因为父元素可能具有将由子元素继承的不同样式。

好事我只需要担心一个属性z-index。

覆盖现有样式并将其移动到子元素的样式

1 个答案: