Question

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

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

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

我理解在testmenu ID中对li的悬停的引用，但是“＆gt; a”让我迷失了。这是怎么回事？

Answer 1

>表示a元素是li的直接子元素。 MDN文档提供了对此selector的详细说明。

以下是一些演示选择器的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

>是儿童组合子。它要求右手边匹配的元素是左手边匹配元素的子元素。

另见the Selectors specification。

Answer 3

li:hover > a引用了a的直接子项li元素

jsfiddle W3C Documentation

<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> s过滤后代，并将其悬停在上面。让所有的孩子。按照<a> s。

过滤子项

Answer 5

选择器正在选择一个a元素，它是li的直接子节点（不是很多级别，直接后代），它正在悬停在具有id的元素的后代上testmenu

请帮我理解下面的CSS代码

5 个答案: