Question

我有以下html标记。我想将css样式应用于li项，这些项是主ul的直接子项。我不想选择嵌套在li内的li项目。我怎么能这样做？

在下面的代码中，我想只选择“主项目1”和“主项目2”。我正在尝试＆gt;运算符，但它不起作用。

HTML：

<div class="nav">
    <ul>
        <li><a>Main item 1</a></li>
        <li><a>Main item 2</a>
            <ul>
                <li><a>sub item 1</a></li>
                <li><a>sub item 2</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS：

.nav > ul li a:hover{
    color: red;
}

演示： http://jsfiddle.net/tk6RS/

Answer 1

您只使用ul选择了父>，您还需要添加另一个，以便选择该ul的直接子项，例如：

.nav > ul > li > a:hover{
    color: red;
}

您还需要添加li > a:hover来选择其中的锚元素，因为子<a>元素也在<li>范围内。

Answer 2

更具体一点。

.nav > ul > li > a:hover{
    color: red;
}

更确切地说......

.nav > ul li

选择li内ul的任何.nav li。这包括任何子菜单中的.nav > ul > li。

li

仅选择ul作为.nav直接子女的li的直接子女。

通过扩展，您只想选择所选{{1}}内的锚点（出于与上述相同的原因）....因此原始答案。

CSS仅选择直接子项

2 个答案: