我试图选择一个元素“.cell-rich”。它有一个“.parent”,但只有当它在另一个“.parent”之前,它有一个元素“.cell-featured”。我希望这会工作,但它没有。有人知道这是否可能与CSS甚至没有添加任何额外的类名到父容器?
.parent:has(.cell-rich) + .parent:has(.cell-featured) > .cell-rich {
padding-bottom: 0;
}
示例HTML:
<div class="parent">
<div class="cell-rich"></div>
</div>
<div class="parent">
<div class="cell-rich"></div>
</div>
<div class="parent">
<div class="cell-featured"></div>
</div>
<div class="parent">
<div class="cell-rich"></div>
</div>
因此,基于这个例子,我只希望将padding-bottom: 0;
设置为第二个父元素的“.cell-rich”元素。
编辑:
当我在浏览器开发工具中闲逛和检查时,我注意到使用:
.parent:has(.cell-rich) + .parent:has(.cell-featured)
padding-bottom: 0;
}
--实际上将属性应用于.parent:has(.cell-featured)
,而不是.parent:has(.cell-rich)
。
1条答案
按热度按时间qoefvg9y1#
在CSS中没有办法选择前面的兄弟,例如
.parent.cell-rich
。使用+,~操作符,你只能选择下一个兄弟。如果你不想添加额外的类名,你可以尝试使用JS来实现这一点。