奇怪的子选择器行为

Question

好吧,我终于决定完全放弃IE6.这很棒.这个决定带来的第一大好处是儿童选择器.所以我第一次开始将它们用于我的嵌套下拉菜单,并期望它变得轻而易举.但是......这是代码:

<style>
body {
    color:#000;
}

ul.top > li {
    color:red;
}

<ul class="top">
    <li>top li</li>
    <li>
        <ul class="sub">
           <li>sub li</li>
        <li>sub li</li>
        </ul>
    </li>
</ul>

我在这里所期望的,只有.top无序列表的直接孩子是红色的,其余的都是黑色的.期待这不合逻辑吗？但他们都变红了......

Answer 1

尝试

ul.top > li {
    color:red;
}

ul.sub > li {
    color:black;
}

??