Css 为什么'；t：悬停会影响本例中的另一个元素吗？

我正在尝试在手机上制作一个带有菜单链接的导航栏，当你点击菜单按钮时就会出现。因此，我决定使用

：hover

CSS事件来显示它们

（，

：hover

用于使其他元素可见，并且工作正常

如果没有所有其他容器（

，以及

#item

和

#menu

之外的其他

元素），代码可以正常工作。但是，当我在当前结构中实现它时，它会停止工作；
..hover~
无法工作，而
..hover
仍然可以工作（因为，
…
是规则名称）


正文{
字体系列：无衬线；
边际：0px；
宽度：100%；
}
导航{
背景色：黑色；
位置：固定；
宽度：100%；
高度：196px；
字体大小：64px；
填充顶部：0px；
z指数：5；
}
导航ul{
颜色：白色；
-webkit填充开始：32px；
宽度：计算（100%-32px）；
}
李国荣{
显示：块；
浮动：左；
高度：18px；
填充顶部：8px；
}
nav ul li#头衔{
最小宽度：80%；
字体大小：粗体；
}
导航ul li#菜单{
宽度：100px；
高度：100px；
颜色：白色；
显示：块；
}
导航ul li#菜单：悬停{
颜色：红色！重要；
}
导航ulli#菜单：悬停~nav ul li#项{
颜色：红色！重要；
可见性：可见！重要；
}
nav ul li#第一项{
边缘顶部：32px；
}
nav ul li#项目{
背景色：rgba（255、255、255、0.5）；
左边距：-32px；
高度：96px；
填充：16px；
颜色：黑色；
显示：块；
宽度：100%；
可见性：隐藏；
}
导航ul li#项目：悬停{
背景色：rgba（255,0,0,0.5）；
文字装饰：下划线；
}
a{
颜色：黑色；
文字装饰：无；
宽度：100%；
}
菜单{
颜色：白色！重要；
}
a:悬停{
颜色：蓝色；
}
a:参观了{
颜色：黑色；
文字装饰：无；
}
a#菜单：已访问{
颜色：白色！重要；
}
a:主动的{
颜色：红色；
文字装饰：无；
}


艾蒂莫西的网站

您的代码有一些错误：

你的html不正确-通过在lis中放置锚来修复此问题
ID必须是唯一的-删除多个ID
您的css选择器完全错误-您希望在悬停的li之后显示任何同级li-您不能完全限定同级选择器之后的位，否则您说的是li之后的任何nav同级，只需更改tilda之后的位以匹配li

正文{
字体系列：无衬线；
边际：0px；
宽度：100%；
}
导航{
背景色：黑色；
位置：固定；
宽度：100%；
高度：196px；
字体大小：64px；
填充顶部：0px；
z指数：5；
}
导航ul{
颜色：白色；
-webkit填充开始：32px；
宽度：计算（100%-32px）；
}
李国荣{
显示：块；
浮动：左；
高度：18px；
填充顶部：8px；
}
nav ul li#头衔{
最小宽度：80%；
字体大小：粗体；
}
导航ul li#菜单{
宽度：100px；
高度：100px；
颜色：白色；
显示：块；
}
导航ul li#菜单：悬停{
颜色：红色！重要；
}
nav ul li#menu:hover~li.item{/*以类为目标，仅在tilda之后使用li部分*/
颜色：红色！重要；
可见性：可见！重要；
}
nav ul li#第一项{
边缘顶部：32px；
}
nav ul li.item{/*目标类而不是id*/
背景色：rgba（255、255、255、0.5）；
左边距：-32px；
高度：96px；
填充：16px；
颜色：黑色；
显示：块；
宽度：100%；
可见性：隐藏；
}
导航ulli.项目：悬停{
背景色：rgba（255,0,0,0.5）；
文字装饰：下划线；
}
a{
颜色：黑色；
文字装饰：无；
宽度：100%；
}
菜单{
颜色：白色！重要；
}
a:悬停{
颜色：蓝色；
}
a:参观了{
颜色：黑色；
文字装饰：无；
}
a#菜单：已访问{
颜色：白色！重要；
}
a:主动的{
颜色：红色；
文字装饰：无；
}


艾蒂莫西的网站






你的html中有错误：一个
不能包含一个作为孩子。首先解决这个问题。另外，
nav ul li#菜单：hover~nav ul li#item
应该是
nav ul li#菜单：hover~li#item
，因为
后面是另一个
，而不是一个。@MrLister不幸的是，（将
放在
中）更改CSS规则）没有做任何事情（除了将CSS缩小一点）。然后肯定还有其他事情。你能用你现在拥有的代码更新这个问题吗？只需注意，我可以使用
显示：块；
-ed
（s）作为链接，而不仅仅是其中的文本作为链接。另外，旁注：这不起作用。@aytimothy可能是，但它是无效的html-li是ul中允许的唯一子元素。只需将其切换并正确设置样式。我收回它。它起作用。问题是代码段太小。html结构是规则，而不是建议如果你想忽略它，那没关系，但是当浏览器试图为你修复代码时，它们会以不同的方式运行。你也会因为搜索引擎优化而受到惩罚，并产生其他副作用。所以尽一切努力忽略它，但当你因为它而出现其他bug时，别忘了我告诉过你你会的。我不会为销售代表做这件事——我做这件事是为了尝试和帮助，如果你不想知道这是好的，那么让你销售代表付出代价的不是寻求帮助，而是忽略了提供的帮助。