当下一个兄弟姐妹具有特定类别时选择前一个兄弟姐妹

Question

我正在使用一个使用 Bootstrap 的内容管理系统，并且有很多默认样式。全出血英雄图像页面标题在移动设备上具有默认的 margin-bottom: 20px 和 border-bottom: 1px 纯灰色。当页面标题后面有一个具有背景颜色类的部分时，我想删除此样式。

这就是我所拥有的有效方法，但我觉得必须有一种方法可以将其压缩为一行：

.fullbleed:has(+ section.bg-grey),
.fullbleed:has(+ section.bg-green),
.fullbleed:has(+ section.bg-grey-xlight) {
     margin-bottom: 0;
     border-bottom: none;
}

这是我尝试过的方法，但不起作用，我不确定为什么。我真的觉得它应该有效，所以非常感谢任何帮助，我不知道我哪里出了问题。

.fullbleed:has(+ section[class^='bg-']) {
     margin-bottom: 0;
     border-bottom: none;
}

我的团队真正使用的唯一其他背景颜色是绿色、灰色和超浅灰色，但我不想像第一个选项那样对它们进行硬编码，因为我希望此代码是常绿的并适用于任何背景颜色其他开发人员可能想使用。

我确实相信我的公司使用 JQuery，但我从未使用过它。如果可以用 JQuery 实现这一点，我也对此持开放态度。

先谢谢大家了。

Answer 1

干得好，你的解决方案就快完成了。这应该可以解决问题。既然您说该部分将有一个背景颜色类别，我们不一定知道它是否是第一类别，这就是为什么星号是最好的。

.fullbleed + section[class*='bg-'] {
 margin-bottom: 0;
 border-bottom: none;
}