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;
}

...

Answer 2

蒂姆给了你解决方案。对此行为的解释是，尽管color: red;仅应用于顶级li，但颜色由其后代继承。请查看CSS Inheritance at Dorward Online以获得深入的解释。

Answer 3

你看到红色被应用于列表中的第一个和第二个元素.top，现在第二个元素没有应用颜色的任何样式信息，因此它使用了父女巫的风格颜色为红色。

Answer 4

不幸的是，子选择器导致所有li继承该类。因此，您需要定义另一个孩子ul.sub > li{

奇怪的子选择器行为

4 个答案: