Question

我正在从服务器端生成类名，如：

<p class="level_1">List item 1</p>
<p class="level_2">List item 2</p>
<p class="level_3">List item 3</p>
<p class="level_1">List item 1</p>
<p class="level_2">List item 2</p>
<p class="level_1">List item 1</p>

我希望输出带有缩进，使其看起来像：

List item 1
   List item 2
      List item 3
List item 1
   List item 2
List item 1

类名的语法类似于level_$i，其中$i是可变的，它可以转到任何级别（从1到n）。那么在这种情况下如何将CSS应用于缩进？

Answer 1

你不能在纯CSS中做循环。考虑将LESS用于此目的。这是一个关于LESS Loops

的教程

您可以使用jQuery实现这一目标...请参阅我为您准备的jsFiddle example。

var i= 1,
    val= 0;

$('[class^=level_]').each(function(){

$('.level_' + i).css('padding-left',val+'px');
    i++;
    val += 20;
});

Answer 2

我可以看到2个解决方案：

您可以在生成列表时自动生成CSS样式（使用PHP）
您可以使用javascript / jquery来解析元素并动态创建适当的规则。这里是JSBin：http://jsbin.com/zaviqeyavico/1/edit

在具有变量名的类上应用CSS

2 个答案: