Question

例如我的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将无法完成工作

这可能吗？

Answer 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代码段。请记住，每个连续的级别将继承之前的级别。这就是CSS的“级联”部分的全部概念，但是我已经把自己遗忘在较低的水平并且让事情变得混乱。

Answer 2

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

这是：

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

Answer 3

如果您不知道彼此之间可能存在多少个孩子UL / LI，那么CSS中就无法实现这一点。

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

Javascript 是我前进的方向 - 思考！

Answer 4

看起来你想要一些以编程方式定义你的风格的方法。单独使用CSS是不可能的。它不支持您定义自己的符号名称，更不用说尝试做更多“programmery”。如果您能够动态生成CSS，那么您可以使用它来计算级别数，并在每次算法上定义样式

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

Answer 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不是必需的，您可以使用任何方法查找父元素。

如何将不同的CSS样式应用于彼此发生的子元素？

5 个答案: