将背景颜色应用于 li 但不应用于嵌套的

Question

我嵌套了 ul/li，问题是，如果您向顶部 li 添加背景颜色，因为其中有嵌套项目，整个列表似乎都有这种背景颜色，而不仅仅是顶部 li （我认为这是因为它延长了顶部li的高度。

是否可以只将背景颜色应用于顶部li？

我希望这是有道理的！

Answer 1

有关系选择器

>

，意思是“直系孩子”：

ul > li {
    background-color: <your color>;
}

这通常比没有

>

表达的规则具有更高的优先级。这意味着

ul > li

块的属性将覆盖

ul li

块中的属性。

---

现已过时的解决方法

注： 2010 年首次撰写此答案时，Internet Explorer 6.0 仍然拥有巨大的市场份额。我保留了这部分答案，以帮助任何可能陷入过去的程序员。

我在使用直接子表示法时遇到了跨平台兼容性问题（IE6 不支持）。您可以做的就是设置多个级别的规则来解决这个问题：

ul li {
    background-color: <your color>;
}

ul li li {
    background-color: none;
}

Answer 2

您说的是顶部

li

，但我认为您指的是根

li

，它的子元素也包含

li

元素。在这种情况下，您可以按如下方式设置背景颜色：

.myroot>ul>li { background-color: Yellow }

注意：上面的示例需要一个类名为“myroot”的包装元素（通常是

DIV

）。

请参阅本文了解有关 CSS 子选择器的更多信息。

Answer 3

我的理解是，你有一个带有 LI 的 UL（我们称之为“父级”），而 LI 也有一个带有 LI 的 UL（我们称之为子级）？您将背景应用于父级，并且它在子级下也可见？

由于孩子位于父母内部，他们必须改变他的高度，因此背景比坚特大，有两种方法可以阻止它，你可以（如前所述）为孩子放置另一个背景，或者你可以放一些东西就像父级中的 SPAN 一样，并将背景放在 SPAN 而不是 LI.parent 上。

Answer 4

你可以随时为孩子李应用不同的背景颜色。

Answer 5

使用jquery并给第一个li一个特殊的类

`$("ul li:first")`.addClass('special_bg')

= 仅获取 <-li-> <-ul-> 的第一个

元素

Answer 6

这取决于你的CSS。您可以定义一个顶级 li 类并使用它来设置背景颜色。

Answer 7

孩子总是继承父母的属性；这就是为什么它被称为Cascading样式表。

我建议为所有

li

元素提供默认背景颜色，并为顶级元素覆盖它（例如使用特殊类）。