CSS选择第二级元素

Question

如何删除二级li元素的背景？

<ul class="navi">
    <li><a href="">Test</a></li>
    <li class="current">
        <a href="">Test</a>
        <ul class="navi2">
            <li class="current"><a href="">Remove bg</a>
            </li>
            <li><a href="">Remove bg</a>
            </li>
        </ul>
    </li>
    <li><a href="">Test</a>
    </li>   
</ul>

我试图background-color: blue代替background: none,而且它有效.我真的不知道为什么.

这是我的CSS:

ul.navi {
    list-style: none;
    width: 247px;
}

ul.navi > li  {
    line-height: 36px;
    background-color: red;
    border-radius: 8px;
    margin-bottom: 10px;
}

ul.navi > li > ul > li {
    background: none;   
}

ul.navi li a {
    display: block;
    color: #f4dfe8;
    font-weight: bolder;
    padding: 0 0 0 12px;
    text-decoration: none;
}

http://jsfiddle.net/zhrgyLrf/

Answer 1

为什么不直接在a子元素上设置背景？

更新的示例

ul.navi > li > a {
    background-color: red;
}

原因background: none不起作用是因为您在整个父li元素上设置背景.因此,即使孩子没有背景,父母的背景仍会显示,因为它包含孩子.作为替代方案,您必须将子项的背景设置为#fff.不过,这样做会让您失去透明度.

Answer 2

你的礼在红礼里面。例如，尝试设置另一种颜色

ul.navi > li > ul > li {
    background: #fff;   
}

颜色：透明在这里也不起作用...因为当你有了颜色：透明时，它就是透明的，并且“下面”的红色在它下面是可见的。

祝你好运，希望有帮助。

更新： http: //jsfiddle.net/zhrgyLrf/1/