请帮助我理解以下 CSS 代码

Posted 2023-03-06

【中文标题】请帮助我理解以下 CSS 代码

【英文标题】：Please help me to understand the following CSS code

【发布时间】：2014-01-15 08:53:22

【问题描述】：

无论如何，我不是 CSS 专家。通常情况下，我能够通过自己的方式了解我在看什么，然后能够将它塑造成我想要的。

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

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

我理解在 testmenu ID 中对 li 悬停的引用，但 "> a" 让我迷失了方向。这是怎么回事？

【问题讨论】：

相关：***.com/questions/4459821/css-selector-what-is-it

谢谢。我尽量避免重复，但我错过了这个。非常感谢

选择a，它是li 悬停在li 上的直接后代，它进一步嵌套在任何具有id 或#testmenu 的元素下

【参考方案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/

【讨论】：

"direct" 是多余的，DOM 没有任何非直接的子元素。

@Lee 很高兴我能帮上忙。

@Quentin by direct 我指的是元素的非孙子。 MDN 文档似乎与这种措辞相呼应，The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. 虽然没有必要，但我认为直接有助于强调这一点。

【参考方案2】：

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

另见the Selectors specification。

【参考方案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>

【参考方案4】：

找到 id=testmenu。得到所有的后代。按<li>s 过滤后代，并悬停在上面。得到所有的孩子。按<a>s 过滤子级。

【参考方案5】：

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