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元素上设置背景。因此，即使孩子没有背景，父母的背景仍会显示，因为它包含孩子。作为替代方案，您必须将孩子的背景设置为#fff。在这样做的过程中，遗憾的是你会失去透明度。

Answer 2

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

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

颜色：透明也不会在这里工作...因为当你有颜色：透明，它是透明的，＆＃34;在＆＃34;下面＆＃34;在它下面可以看到红色。

祝你好运，希望有所帮助。

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

Answer 3

发生这种情况是因为你将背景设置为整个<li>，第二级是第一级，第二级是透明背景，这就是因为你看到红色（背景是中等）的原因组）。您有两个选择：

将背景设置为元素
设置与原始背景匹配的背景

我建议将背景设置为这样的元素：

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

小提琴：http://jsfiddle.net/zhrgyLrf/2/

CSS选择第二级元素

3 个答案: