CSS 选择器到兄弟没有特定 class 的目标元素

Question

我正在开发一个滑块，它将上一个按钮、内容和下一个按钮作为同级节点。我隐藏了禁用的按钮，我需要调整内容的边距我在选择器上遇到了困难。我想定位容器以根据按钮是否被禁用来调整边距。我最初的想法是用 flex 来做这个，但它是一个旧的

我一直在尝试

.content {
    &:not(+ .button-disabled) {
        margin-left: 50px;
    }
}

但我似乎不允许 +在 :not() 里面。有没有其他方法可以解决这个问题？

Answer 1

你可以定义一个class给三兄弟的父容器，比如

<div class="disabled-button">
    <div class="prev"></div>
    <div class="cont"></div>
    <div class="next"></div>
</div>

并为他们定义 CSS，例如：

.wrapper {
    width: 80%;
    height: 30px;
    display: inline-flex;
}

.wrapper > div {
    width: 33%;
    height: 100%;
    border: 1px solid black;
    background-color: green;
}

.wrapper.disabled-button .prev {
    margin-left: 50px;
}

<div class="disabled-button wrapper">
    <div class="prev"></div>
    <div class="cont"></div>
    <div class="next"></div>
</div>

<div class="wrapper">
    <div class="prev"></div>
    <div class="cont"></div>
    <div class="next"></div>
</div>

CSS 选择器到兄弟没有特定 class 的目标元素

CSS selector to target element where sibling does not have a specific class

css

sass