Html 悬停效果不会激活其他元素

出于某种原因

#item1:hover ~ #item1::before{ display: block; }

当我将鼠标悬停在#项1上时，不会在块中实际显示我想要的元素

这是代码，请提前感谢！ 更改CSS

*{
保证金：0；
填充：0；
}
标题{
显示器：flex；
证明内容：之间的空间；
背景：#2a2e33；
对齐项目：居中；
宽度：100%；
高度：60px；
位置：相对位置；
}
#标志{
颜色：白色；
左边距：10px；
位置：相对位置；
}
#名单{
显示器：flex；
身高：100%；
列表样式：无；
颜色：白色；
}
李{
左侧填充：10px；
右边填充：10px；
填充顶部：20px；
最大高度：100%；
位置：相对位置；
}
李：悬停{
背景：#1e2329；
}
李：以前{
内容：“；
背景颜色：巧克力色；
宽度：100%；
高度：4px；
位置：绝对位置；
排名：0；
左：0；
显示：无；
}
李：悬停：：之前{
显示：块；
}

标志

主页
关于我们
联系
博客

符号

~

是一般同级组合符。发件人：

通用同级组合符（~）分隔两个选择器，仅当第二个元素紧跟第一个元素（但不一定立即）并且两个元素都是同一父元素的子元素时，才匹配第二个元素

您的元素

#item1

没有同级

#item1

，因为它就是该元素本身。换句话说，元素不能跟随它自己

---

这意味着您的CSS选择器无法匹配任何元素，因为没有两个元素具有相同的

id

谢谢Lalji！我已经为此挣扎了一段时间