Html 如何选择不是父div的子div但在父div之外的div？

当用户将鼠标悬停在

汉堡包

div上时，我正试图用class

nav

选择div，以将

显示

属性更改为

块

我在互联网上搭建了脚手架，看到一些人说，如果使用

：not（在这里插入\u container\u name）

伪类，就可以实现这一点，但是，它似乎不起作用

一个要求是我不能使用Javascript。

下面是我解决这个问题的尝试：

.nav{
显示：无；
填充：15px；
背景：红色；
}
.汉堡包{
保证金：0；
填充：15px；
文本对齐：左对齐；
}
.汉堡：悬停.汉堡：不（.hamburger）>.导航{
显示：块；
}
.hamburger>.toggle btn{
颜色：黑色；
文字装饰：无；
}

展示

像这样使用

+

：

.hamburger:hover + .nav {
  display: block;
}

请参见下面的演示：

.nav{
显示：无；
填充：15px；
背景：红色；
}
.汉堡包{
保证金：0；
填充：15px；
文本对齐：左对齐；
}
.汉堡包：悬停+导航{
显示：块；
}
.hamburger>.toggle btn{
颜色：黑色；
文字装饰：无；
}

展示

通过使用

~

您将能够瞄准

导航

，即使您决定在两者之间添加其他元素

.hamburger:hover ~ .nav {
  display: block;
}

示例代码段

.nav{
显示：无；
填充：15px；
背景：红色；
}
.汉堡包{
保证金：0；
填充：15px；
文本对齐：左对齐；
}
.汉堡包：悬停~.导航{
显示：块；
}
.hamburger>.toggle btn{
颜色：黑色；
文字装饰：无；
}

展示

嘿，我刚刚写了同样的答案；）