仅对嵌套无序列表的上一层进行样式设置答案

【问题标题】：Styling only the previous level of a nested unordered list仅对嵌套无序列表的上一层进行样式设置
【发布时间】：2013-01-31 15:32:49
【问题描述】：

我想知道是否可以只为嵌套列表的上一层设置样式。要明白我的意思，请看这个小提琴：

http://jsfiddle.net/MYasJ/

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

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

编辑：小细节：问题是因为嵌套列表包含在父 li 元素中。这有一些很好的理由（例如，如果您浮动父元素，嵌套列表将随之浮动），但也导致您不能（至少我不知道如何，这是我的问题）样式 @987654326仅限 @ 元素。我对:first-line 伪类有一些运气，但这显然不适用于多行项目，也不能跨越li 元素的整个宽度。

【问题讨论】：

否，因为子级别包含在前一个级别中。因此，您必须在较低级别设置 background-color 以“屏蔽”background-color
这就是我在小提琴中所做的。我将它设置为透明，但显然，包含元素的背景是可见的。这个问题的重点是如何避免它。
你别无选择。您必须在某处使用额外的元素。当您在子列表上设置透明背景时，您允许其父背景（红色）显示出来。父元素也必须是透明的才能显示绿色。

标签： html css html-lists

【解决方案1】：

在您的 HTML 代码中，"Only this item should have red background" 文本节点和嵌套的 <ul> 都是父 <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;
}

【讨论】：