如何阻止嵌套列表从父列表继承样式？

Question

我想添加一个嵌套列表，但我遇到了从父列表继承的问题。我已按照此question和此question进行了操作，但他们没有帮助。

如何摆脱嵌套列表中的红色背景？

http://jsfiddle.net/wHztz/25/

<div class="innerLeft">
    <ul>
        <li><a href="">Fruit</a></li>
        <li>
            <ul>
                <li><a href="">Apples</a></li>
            </ul>
        </li>
        <li><a href="">Vegetable</a></li>
    </ul>
</div>

.innerLeft ul {
    width:199px;
    float:left;
    margin:0px;
    padding:0px 0 0 12px;
    list-style:none;
    min-height:10px;
}
.innerLeft ul li {
    background: red;
    padding:0px;
    margin:0px 0 10px 0;
    height:18px;
}
.innerLeft ul li ul {
    background: '';
}
.innerLeft ul li ul li {
    background: blue;
}

Answer 1

不要在li中使用背景颜色在锚点

中使用它

.innerLeft ul li a{
    background: red;
    display:block;
}

这将解决您的问题

<强> updated jsFiddle file

Answer 2

以下规则告诉浏览器使用红色背景呈现innerLeft内的任何列表元素：

.innerLeft ul li {
    background: red;
    padding:0px;
    margin:0px 0 10px 0;
    height:18px;
}

使用特异性来定位第一个ul：

ul li {
  background-color: #fff;
}
.innerLeft > ul li {
    background: red;
    ...
}

通过使用>选择器，您告诉浏览器选择.innerLeft或直接后代的子项。