代码之家 › 专栏 › 技术社区 › jayarjo

奇怪的子选择器行为

css-selectors css

1

jayarjo · 技术社区 · 16 年前

好吧,我终于决定放弃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 无序的列表是红色的,其余的都是黑色的。这不符合逻辑吗?但实际上它们都变红了。。。

4 回复 | 直到 16 年前

1

2

MvanGeest 16 年前

蒂姆给了你解决办法。对这种行为的解释是 color: red; li s、颜色是继承他们的后代。检查 CSS Inheritance at Dorward Online

2

5

Tim 16 年前

尝试

ul.top > li {
    color:red;
}

ul.sub > li {
    color:black;
}

??

3

1

Ramuns Usovs 16 年前

你可以看到红色同时应用于列表中的第一个和第二个元素。

4

0

bradenkeith 16 年前

li 继承类。所以你需要定义另一个孩子 ul.sub > li{