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 子元素上设置背景？

Updated Example

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

background: none 不起作用的原因是因为您在整个父元素 li 上设置了背景。因此，即使 children 没有背景， parent 的背景仍然会显示出来，因为它包含了 children 。或者，您必须将 child 的背景设置为 #fff。但是，这样做很遗憾，您会失去透明度。