Question

我想知道是否可以仅设置嵌套列表的上一级别的样式。看看我的意思，请看这个小提琴：

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

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

编辑：细化：问题是因为嵌套列表包含在父li元素中。这有一些很好的理由（例如，如果你浮动父元素，嵌套列表将浮动它），但你不能（至少我不知道如何，这是我的问题）样式{{仅限1}}元素。我对li伪类运气不错，但这显然不适用于多行项目，也不适用于li元素的整个宽度。

Answer 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;
}

仅设置嵌套无序列表的上一级别的样式

1 个答案: