0

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

http://jsfiddle.net/MYasJ/

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

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

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

4

1 回答 1

1

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

您可能希望将文本包装成 a<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;
}
于 2013-01-30T23:18:47.367 回答