这个css选择器/语法是什么意思？ [复制]答案

【问题标题】：What does this css selector/syntax mean? [duplicate]这个css选择器/语法是什么意思？ [复制]
【发布时间】：2013-01-14 19:26:56
【问题描述】：

可能重复：
What does “>” mean in CSS rules?
CSS ‘>’ selector; what is it?

什么意思：

#nav > li > ul

Google 忽略了 >，我不知道它是什么意思。我的意思是“>”。

【问题讨论】：

标签： css

【解决方案1】：

> 表示该元素应该是直接子元素，而不仅仅是后代。

给定以下 HTML：

<div id="nav">
    <ul>
        <li></li>
    </ul>
</div>

以下 CSS 选择器将匹配列表项：

#nav li { }

虽然这个不会：

#nav > li { }

【讨论】：

【解决方案2】：

> 是一个子选择器。这意味着它将匹配直接子代，而不是其他嵌套的子代。

例如，这个 css：div > p > span 将匹配这个 HTML：

<div>
    <p><span>...</span></p>
</div>

但不是这个 HTML：

<div>
    <p>
        <ul>
            <li><span> ... </span></li>
        </ul>
    </p>
</div>

在您的示例中，您的 CSS 将匹配如下结构：

<ul id="nav">
   <li>
        <ul> <-- this one gets matched
...

如果没有看到 CSS 的其余部分，我会假设它是在导航元素中设置嵌套子菜单的样式。

【讨论】：

【解决方案3】：

你不是说#nav > ul > li吗？

在这种情况下，它的意思是“选择li标签，它是ul标签的子标签，它本身就是ID为nav的元素的子标签。

<div id="nav">
    <ul>
        <li>The css selector locates this list item</li>
    </ul>
</div>

【讨论】：