当子元素相互出现时，如何将不同的 CSS 样式应用于子元素？答案

【问题标题】：How to apply different CSS style to child elements as they occur inside one another?当子元素相互出现时，如何将不同的 CSS 样式应用于子元素？
【发布时间】：2010-05-27 20:23:12
【问题描述】：

例如我的 HTML 是这样的

<ul>
    <li>Sample 1</li>
    <li>Sample 2
        <ul>
            <li>Sub 1</li>
            <li>Sub 2</li>
            <li>Sub 3
                <ul>
                    <li>Grandsub 1</li>
                    <li>Grandsub 2</li>
                    <li>Grandsub 3
                        <ul>
                            <li>verySub 1</li>
                            <li>verySub 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Sample 3</li>
</ul>

我想在每个子 <UL> 上使用不同的样式，而不需要在它们上定义任何类或 id。

我不知道有多少子 <ul> 可能会出现在另一个内部，所以内联 css 不会起作用

这可能吗？

【问题讨论】：

标签： css

【解决方案1】：

您只需要像这样指定每个级别：

<style type="text/css">
ul li { color: red; }
ul li ul li { color: blue; }
ul li ul li ul li { color: black; }
ul li ul li ul li ul li { color: green; }
</style>

没有内联 style 属性，不需要类。

在您提供的 HTML sn-p 上完美运行。请记住，每个连续的级别都将从之前的级别继承。这就是 CSS 的“级联”部分的全部想法，但我已经把自己烧毁了，忘记了较低级别的边距，让事情变得混乱。

【讨论】：

你仍然可以使用相对定位（左：20px;），因为它会累加到每个 li 孩子身上。否则我想知道超过 6 个或 10 个或 20 个嵌套列表可以表示什么！
你明白最后一条规则的颜色：绿色；将应用于深度为 4 AND MORE 的每个列表项？如果前面的规则不存在，“ul li ul li ul li ul li ul li”的样式将被“ul li ul li ul li ul li”样式化。
对 artlung 的另一个说明：您可以安全地从每个选择器中删除“ul”，除了第一个选择器（即“ul li li li li”）。如果你有优先级问题，那么是时候添加一些 ul 来增加优先级权重了。
Starx -- 有上限吗？ 20 个级别就是 20 行代码，很难想象一个比 20 个级别更深的大纲。 Felipe，我知道严格来说uls 是可选的。但是，如果其中一些列表是 ol 呢？我宁愿具体一点，但这是编码风格的问题。

【解决方案2】：

您可以为每个元素使用“内联样式”来拥有不同的样式。

这里是：

<ul style="property:value;">
     <li>..</li>
</ul>

【讨论】：

我不知道有多少子 <ul> 可能出现在另一个内部，所以内联 css 不会起作用

【解决方案3】：

如果您不知道彼此内部可能有多少个子 UL/LI，那么这在 CSS 中是不可能的。

CSS 不支持“模糊逻辑”，例如：if there are over 5 <li>'s then do something.

Javascript 是我认为的前进方向！

【讨论】：

【解决方案4】：

您似乎想要某种方式以编程方式定义您的风格。单独使用 CSS 是不可能的。它不支持您定义自己的符号名称，更不用说尝试做一些更“编程”的事情了。如果您能够动态生成 CSS，那么您可以使用它来计算级别数并每次通过算法定义样式

否则，另一种方法是将嵌套级别设置为最大值（例如 20 级），并为每个嵌套定义一个样式，就像 artlung 建议的那样。大多数情况下，较低级别的定义不会被使用，但如果您需要它们，它们会在那里。这并不完美，但它是直接用 CSS 编写可以做到的最好的。

【讨论】：

【解决方案5】：

这使用 jQuery，并在三个背景颜色列表中循环：

function nestedcolour(elements, level) {
    if (elements.length > 0) {
        var colour = ["#fafafa", "#fbf9ea", "#eeeeee"][level % 3];
        elements.css('background-color', colour);
        nestedcolour(elements.children("ul").children("li"), level + 1);
    }
}

$(document).ready(function() {
    nestedcolour($(".classofparentelement"), 0);
});

.classofparentelement 不是必需的，您可以使用任何方法来查找父元素。

【讨论】：