Html 无CSS嵌套同级选择器

我试图减少对CSS的熟悉，我试图在悬停带有类

navbar包装的元素时，让类
navbar second
的
div
移动

我在第二个元素中用到了这个，但在第一个元素中没有，因此我经历了很多奇怪的事情，你们可以在这里看到：

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

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

您需要使用
+.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
被每个
&
替换为
+
，而不是
&+&
。
.navbar-first:hover + .navbar-first:hover.navbar-second {}