CSS中的“>”是什么意思？ [复制]答案

【问题标题】：What does ">" mean in CSS? [duplicate]CSS中的“>”是什么意思？ [复制]
【发布时间】：2012-03-18 06:02:51
【问题描述】：

可能重复：
What does “>” mean in CSS rules?

> 符号在 CSS 中是什么意思？我在我的 Wordpress 博客主题中注意到了它，并想知道它在做什么。

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
    background: #efefef;
}
#access li:hover > a,
#access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
}
#access ul li:hover > ul {
    display: block;
}

【问题讨论】：

标签： css css-selectors

【解决方案1】：

这是一个子选择器（也称为子组合器）。您可以在万维网联盟 (W3C) 的网站上找到有关选择器的更多信息，您可以在其中阅读 CSS2 entry on the child selector 或者你可以直接跳到CSS3 entry on the child selector。

另外，这是另一个关于 CSS Child vs Descendant selectors 的 SO 问题的精彩引述：

想想英语中“child”和“descendant”这两个词的意思：

我的女儿既是我的孩子，也是我的后代

我的孙女不是我的孩子，但她是我的后裔。

【讨论】：

CSS2 选择器规范已被 CSS3 规范取代，因为它现在是一个推荐（也有一个非常酷的 URL）：w3.org/TR/selectors

【解决方案2】：

这意味着只有“第一个嵌套”元素将被定位（“子”元素），例如

   <div id="a">
       <div id="b">
         <div id="c">
       </div>
      </div>
    </div>

如果你写

#a div{
 background: red;
}

那么 #b 和 #c 都会是红色的，但是如果你使用 > like

#a > div{
 background: red;
}

那么只有#b 会是红色的，#c 不会。

【讨论】：

我认为如果您在id=a div 下添加另一个div 和id=d 以视觉上显示所有child，您的回答会更有帮助将选择元素。 :)

【解决方案3】：

li > a 匹配任何作为 li 子元素的 a 元素。有关任何选择器，请参见 W3C CSS page。

【讨论】：