代码之家 › 专栏 › 技术社区 › Starx

如何将不同的CSS样式应用于子元素,因为它们彼此之间发生在一起?

css

Starx · 技术社区 · 14 年前

例如,我的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不会出现在作业中

这可能吗?

5 回复 | 直到 14 年前

artlung 14 年前

您所需要的就是这样指定每个级别:

<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代码段。记住,每个连续的级别都将从它之前的级别继承。这就是CSS“层叠”部分的全部想法,但我已经把自己烧掉了,忘记了较低级别的空白,让事情变得乱七八糟。

Mr.Expert 14 年前

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

这里是:

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

Barrie Reader 14 年前

如果你不知道有多少个ul/li孩子可能在彼此的内部,那么这在css中是不可能的。

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

JavaScript 是我向前想的路!

Christopher Howlin 14 年前

看起来您需要某种方式来以编程方式定义您的样式。仅使用CSS是不可能的。它不支持您定义自己的符号名,更不用说尝试做更多的“编程”。如果您能够动态地生成CSS,那么您可以使用它计算出级别的数量,并根据算法每次定义样式。

否则,另一种方法是在嵌套级别上设置最大值(比如20个级别),并为每个级别定义一个样式,例如 阿特隆 建议。大多数情况下,较低级别的定义不会被使用,但如果您需要,它们会出现在那里。这不是完美的,但这是您可以用CSS直接编写的最好方法。

gpvos 14 年前

它使用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 不是真正必要的,您可以使用任何方法来查找父元素。