请帮我理解下面的CSS代码

Question

无论如何，我不是CSS大师。 通常情况下，我能够蜿蜒地理解我正在看的东西，然后能够将它塑造成我想要的东西。

话虽如此，下面的CSS行让我摸不着头脑，我找不到任何东西来帮助我澄清它。

#testmenu li:hover > a{
    color: #fafafa;
}

我了解在testmenu ID中对li的悬停的引用，但是“>”使我迷失了方向。 这里发生了什么？

Answer 1

>表示a元素是li的直接子元素。 MDN文档提供了对此选择器的良好描述。

这是一些HTML演示选择器：

<ul id="testmenu">
    <li><a href="#">Will be selected</a></li>
    <li><div><a href="#">Will not be selected</a></div></li>
</ul>

JS小提琴： http : //jsfiddle.net/7ePEr/

Answer 2

>是子组合器。 它要求右侧匹配的元素是左侧匹配的元素的子元素。

另请参阅选择器规范 。

Answer 3

li:hover > a引用a元素，它是li的直接子元素

jsfiddle W3C文档

<ul id="testmenu">
    <li>
        <a href="#">I will change color on hover</a>
    </li>
    <li>
        <div>
            <a href="#">I will not</a>
        </div>
    </li>
</ul>

Answer 4

查找id = testmenu。 得到所有后代。 用<li>过滤子孙，并将其悬停。 让所有的孩子。 用<a>的子项过滤子项。

Answer 5

选择器正在选择a元素， a元素是悬停在其上的li的直接子级（向下不多，它的直接后代），该li是id为testmenu的元素的后代