CSS仅选择直接子项

Question

我有以下html标记.我想将css样式应用于limain的直接子项ul.我不想选择嵌套在里面的li项目li.我怎样才能做到这一点？

在下面的代码中,我想只选择"主项目1"和"主项目2".我正在尝试>运算符,但它不起作用.

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>内.