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

Question

我已经嵌套了ul / li，问题是如果你给top li添加一个背景颜色，因为里面有嵌套的项目，整个列表看起来都有这种背景颜色而不仅仅是顶层li（我假设这是因为它延伸了顶部li的高度。

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

我希望这是有道理的！

Answer 1

关系选择器>表示“直系孩子”：

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

但我在使用它时遇到了跨平台兼容性问题。您还可以做的是设置多个级别的规则：

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

ul li li {
    background-color: none;
}

Answer 2

我的理解是你有一个带有LI的UL（让我们称之为'父'），而LI还有一个带有LI的UL（让我们称之为孩子）？您是否将背景应用于父级，并且在子级下也可以看到它？

由于孩子位于父母内部，他们必须改变自己的身高，所以背景比应该更大，有两种方法来阻止，你可以（如前所述）给孩子另一个背景，或者你可以在父类中放置类似SPAN的东西，并将背景放在SPAN而不是LI.parent。

Answer 3

您说的是顶级li，但我认为您的意思是根li，其子元素也包含li元素。在这种情况下，您可以按如下方式设置背景颜色：

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

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

有关CSS子选择器的更多信息，请参阅this article。

Answer 4

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

Answer 5

使用jquery并为第一个li

提供一个特殊的类

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

=只获取第一个＆lt; -li-＆gt; ＆lt; -ul-＆gt;的元素

Answer 6

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

Answer 7

孩子总是从父母那里继承属性;这就是为什么它被称为 Cascading 样式表。

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