CSS选择第二级元素

问题描述

如何清除第二层 li 元素的背景？

How to remove background on a second level li elements ?

<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 ，它工作。我真的不知道为什么。

I have tried to put background-color: blue instead of background: none, and it worked. I really don't know why.

这是我的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;
}

推荐答案

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

Why not just set the background on the direct a child elements?

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

原因 background：none 不工作是因为你正在设置整个父， li 元素的背景。因此，即使孩子没有背景，父母的背景仍然显示，因为它包含孩子。或者，您必须将子级的背景设置为 #fff 。这样做，不幸的是，你会失去你的透明度。

The reason background: none wasn't working is because you are setting the background on the entire parent, li element. Thus, even though the children don't have a background, the parent's background is still shown because it encompasses the children. As an alternative, you would have to set the children's background to #fff. In doing so, you would unfortunately lose your transparency, though.

这篇关于CSS选择第二级元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！