在变量名为的类上应用CSS

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中不能进行for循环。考虑为此使用较少。以下是关于LESS Loops 的教程

您可以使用jQuery来实现这一点。。。请参阅我为您准备的jsFiddle示例。

var i= 1,
    val= 0;
$('[class^=level_]').each(function(){
$('.level_' + i).css('padding-left',val+'px');
    i++;
    val += 20;
});

Answer 2

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

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