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

【问题标题】：Apply background color to li but not the nested ones将背景颜色应用于 li 但不是嵌套的
【发布时间】：2010-07-05 22:28:19
【问题描述】：

我已经嵌套了 ul/li，问题是如果你在顶部 li 添加背景颜色，因为其中有嵌套项目，整个列表似乎都具有这种背景颜色，而不仅仅是顶部 li（我假设这是因为它增加了顶部 li) 的高度。

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

我希望这是有道理的！

【问题讨论】：

【解决方案1】：

有关系选择器>，意思是“直系子女”：

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

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

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

ul li li {
    background-color: none;
}

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你总是可以为孩子 li 应用不同的背景颜色。

【讨论】：

【解决方案5】：

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

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

= 只获取的第一个元素

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：