为什么：hover伪类后面有另一个选择器？

Question

我无法理解为什么在:hover伪类之后存在选择器，而不是之前。这是如何以及为什么有效？

这有效

div li:hover > ul 
{
display: block;
}

为什么这不起作用？

div li > ul:hover
{
display: block;
}

我做了很多搜索，试图弄清楚为什么要在它之后放置一个选择器或选择器（：hover伪类）;以及它如何定位它的细节，但我似乎无法找到任何有关它的信息。先谢谢你！

Answer 1

您的选择器在逻辑上是不同的。

li:hover > ul与悬停ul内的li匹配。

li > ul:hover匹配任何ul内的悬停li。

默认情况下，您的ul可能已隐藏，因此li > ul:hover不会匹配任何内容。
相比之下，只要li:hover > ul悬停，ul就会与仍然隐藏的li匹配，并显示它。