CSS LESS - 嵌套的兄弟选择器

Question

我正在尝试熟悉CSS LESS,并且我正试图让div类与类navbar-second一起移动时移动navbar-wrapper.

我已经将这个用于第二个元素,但不适用于第一个元素,因此我在很多奇怪的事情中你们可以在这里看到:

<div class="navbar-wrapper navbar-first">
    ...
</div>

<div class="navbar-wrapper navbar-second">
    ...
</div>

和造型:

.navbar-wrapper {
    width: 100vw;
    background: url(../../assets/images/MenuBackground.jpg) no-repeat;
    background-size: cover;
    padding: 0 50px;
    border-bottom: 1px solid white;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);

    &:hover {
        &.navbar-second {
            transition: top ease .5s;
            top: 0px;
        }
    }

    ...
}

.navbar-first {
    position: relative;
    z-index: 2;

    &:hover {
        &+&.navbar-second {
            transition: top ease .5s;
            top: 0px;
        }
    }

    ...
}

.navbar-second {
    position: relative;
    transition: top ease .5s;
    top: -50px;

    ...
}

Answer 1

您需要使用+ .navbar-second而不是&+&.navbar-second:

.navbar-first {
    position: relative;
    z-index: 2;

    &:hover {
        + .navbar-second {
            transition: top ease .5s;
            top: 0px;
        }
    }
}

哪个将编译为:

.navbar-first:hover + .navbar-second {}

以前它正在编译以下内容:

.navbar-first:hover + .navbar-first:hover.navbar-second {}

值得注意的是,&引用父选择器,这意味着选择器.navbar-first:hover正在替换每个选择器&.