html - 仅对嵌套无序列表的上一级设置样式

Question

我想知道是否可以只对嵌套列表的上一级设置样式。要明白我的意思，请看这个 fiddle :

http://jsfiddle.net/MYasJ/

在 fiddle 中，我可以通过覆盖嵌套列表 background-color 属性来达到预期的效果，但这不是我想要的——在我的特定情况下，父列表将图像作为背景，第一级 li 元素应该有红色背景，但嵌套列表的元素应该再次透明，以便“根”列表的背景可见。在 fiddle 中，我使用绿色而不是图片，但我希望你能理解。

SO上有几个问题，比如here ，但它们要么涵盖不同的主题，要么解决方案涉及覆盖子属性——但这并不能解决我的问题。

编辑:详细说明:问题是因为嵌套列表包含在父 li 元素中。这有一些很好的理由(例如，如果你 float 父元素，嵌套列表将随之 float )，但也有你不能(至少我不知道如何，这是我的问题)样式 li 元素。我对 :first-line 伪类很幸运，但这显然不适用于多行元素，也不会跨越 li 元素的整个宽度。

Answer 1

在您的 HTML 代码中 "Only this item should have red background"文本节点和嵌套的 <ul>是 parent 的 child <li> .因此，它们显示在红色背景上。

您可能希望将文本包装成 <div>并为其分配背景颜色。

<ul id="nav">
    <li>
        <div>Only this item should have red background</div>
        <ul>
            <li>But this item should have no background</li>
            <li>Just like this one</li>
            <li>So the green background of the root ul element is visible</li>
       </ul>
    </li>
</ul>

#nav > li > div {
    background-color: red;
}